在第一个input里输入属性的名字，在第二个input里输入单位，通过点击按钮，改变下面box的属性，
比如，在第一个input里输入width，第二个输入，200px，点击按钮，box，宽就会改变
<!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获取到每个需要的东西
给点击按钮设置点击事件onclick事件
比如，通过点击，box宽度变为200px
but.onclick=function(){ var name = text1.value; var val = text2.value; console.log(name,val); box.style.width="200px"; }
如果按照这样的思想，那么上面的变量应该怎添加呢？
box.style.name=val;
这样添加时不正确的。应该用
box.style[name]=val;
注意：.操作属性的时候，后面必须跟正真的属性名称，不能跟变量名称
【】操作属性的时候，里面可以更属性名称和变量名，如果放属性名称的时候，需要加引号，放变量名的时候，不用加引号