专栏首页编程微刊js通过input框输入属性和值,改变div的属性

js通过input框输入属性和值,改变div的属性

js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>函数传参,改变Div任意属性的值</title>

    <style>

        body,p{ /*内外边距重置为0*/

            margin:0;

            padding:0;

        }

        body{

            color:#333;/*字体颜色为黑色*/

            font:12px/1.5 Tahoma;/*字号行高*/

            padding-top:10px;/*上内边距*/

        }

        #outer{ /*div容器,左右置中*/

            width:300px;

            margin:0 auto;

        }

        p{

            margin-bottom:10px;/*下外边距*/

        }

        label{

            width:5em;/*60像素*/

            display:inline-block;/*行内块元素*/

            text-align:right;/*文本右对齐*/

        }

        input{

            padding:3px;

            font-family:inherit;

            border:1px solid #ccc;/*灰色*/

        }

        #div1{

            color:#fff;

            width:180px;

            height:180px;

            background:#000;/*黑色*/

            margin:0 auto;/*左右置中*/

            padding:10px;

        }

    </style>

    <script>

        // 此函数接收3个参数:元素对象,属性名,属性值,把值赋给属性

        var changeStyle = function (elem, name, value) {

            elem.style[name] = value;

        }

        window.onload = function () {

            var oDiv = document.getElementById("div1");//获取div元素引用

            var oBtn = document.getElementsByTagName("button"); //获取按钮的引用

            var oInput = document.getElementsByTagName("input"); //获取input元素的引用

            oBtn[0].onclick = function () { //给确定按钮添加事件

                changeStyle(oDiv, oInput[0].value, oInput[1].value);//调用changeStyle函数

            };

            oBtn[1].onclick = function () { //给重置按钮添加事件处理

                oDiv.removeAttribute("style");//去除样式

            }

        }

    </script>

</head>

<body>

    <!--div容器-->

    <div id="outer">

        <p><label>属性名:</label><input type="text" value="" /></p>

        <p><label>属性值:</label><input type="text" value="" /></p>

        <p><label></label><button>确定</button><button>重置</button></p>

    </div>

    <div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS: hover选择器控制子元素的出现和隐藏

    前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,...

    王小婷
  • jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小...

    王小婷
  • vue2.0移动端自定义性别选择提示框

    这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。

    王小婷
  • Css学习手册之基本篇

    Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

    一灰灰blog
  • vue操作dom元素的三种方法

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到

    我不是费圆
  • dom啦14 移入移出菜单

    用户7873631
  • CSS元素分类

    快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。                设置display:block...

    用户1624346
  • 前端知识点系列二:CSS

    无论是哪种盒子模型,子元素相对于父元素content定位。 改变盒子模型的属性为 box-sizing: border-box/content-box;。

    娜姐
  • css3实战汇总(附源码)

    利用css3的新特性可以帮助我们实现各种意想不到的特效,接下来的几个案例我们来使用css3的box-shdow来实现,马上开始吧!

    徐小夕
  • EMLOG自适应emMsg提示信息

    Youngxj

扫码关注云+社区

领取腾讯云代金券