在第一个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;
注意：.操作属性的时候，后面必须跟正真的属性名称，不能跟变量名称
【】操作属性的时候，里面可以更属性名称和变量名，如果放属性名称的时候，需要加引号，放变量名的时候，不用加引号
时间： 2024-10-03 13:38:49