经过获取input的值来设置box的style属性

时间 2019-11-16

标签经过获取 input 设置 box style 属性繁體版

原文原文链接

在第一个input里输入属性的名字，在第二个input里输入单位，经过点击按钮，改变下面box的属性，javascript

好比，在第一个input里输入width，第二个输入，200px，点击按钮，box，宽就会改变css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="text" name="" id="text2">
    <input type="button" name="" id="but" value='点击'>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload=function(){
            var text1 = document.getElementById("text1");
            var text2 = document.getElementById("text2");
            var but = document.getElementById("but");
            var box = document.getElementById("box");
            but.onclick=function(){
                var name = text1.value;
                var val = text2.value;
                box.style[name]=val;
            }
        }
    </script>
</body>
</html>

首先仍是要经过id获取到每一个须要的东西html

给点击按钮设置点击事件onclick事件java

好比，经过点击，box宽度变为200pxspa

but.onclick=function(){ var name = text1.value; var val = text2.value; console.log(name,val); box.style.width="200px"; }
若是按照这样的思想，那么上面的变量应该怎添加呢？code

box.style.name=val;
这样添加时不正确的。应该用htm

box.style[name]=val;blog

注意：.操做属性的时候，后面必须跟正真的属性名称，不能跟变量名称事件

　　　【】操做属性的时候，里面能够更属性名称和变量名，若是放属性名称的时候，须要加引号，放变量名的时候，不用加引号ip