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 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券