版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.inp{
width: 100px;
height: 100px;
margin: 10px auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
属性：
<input type="text" id="property">
属性值：
<input type="text" id="arrtribute">
<button type="button" id="btn">确认</button>
</div>
<div class="inp" id="box"></div>
<script type="text/javascript">
var pro=document.getElementById('property');
var arr=document.getElementById('arrtribute');
var btn=document.getElementById('btn');
var box=document.getElementById('box');
// var proValue=null;
// var arrValue=null;
btn.onclick=function(){
//获取提交到的值
// proValue=pro.value;
// arrValue=arr.value;
//设置style的样式为proValue,值为arrValue
// box.style[proValue]=arrValue;
box.style[pro.value]=arr.value;
//自动清空input里的内容
pro.value='';
arr.value='';
}
</script>
</body>
</html>
样式2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wamp{
position: relative;
width: 800px;
height: 600px;
}
#bigBox{
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0.5);
}
#box{
width: 300px;
padding-left: 30px;
height: 230px;
background: white;
border: 10px solid #ccc;
position: absolute;
left:25%;
top:10%;
}
</style>
</head>
<body>
<div class="wamp" style="font-size:12px;" >
设置下面盒子的样式：
<span style="background: red;border: 1px solid #000000;display:inline-block;margin-top: 20px;" id="btn">点击设置</span>
<div id="myclick" style="background white; width: 100px;margin: 20px 0px 0px 20px; height: 100px; border:1px solid #000000;">
</div>
<div id="bigBox" style="display: none;">
<div id="box" style="font-size:12px;" >
<p style="margin-top:20px ;">设置背景颜色:
<span id="red" style="width: 40px;height: 40px;display: inline-block;background: red;line-height: 40px;text-align: center;" ></span>
<span id="green"style="width: 40px;height: 40px;display: inline-block;background:green;line-height: 40px;text-align: center;"></span>
<span id="yellow"style="width: 40px;height: 40px;display: inline-block;background:yellow;line-height: 40px;text-align: center;"></span>
</p>
<p style="margin-top:20px ;">设置宽度:
<span id="one" style="width: 40px;height: 40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;" >200</span>
<span id="two" style="width: 40px;height: 40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;">400</span>
<span id="three" style="width: 40px;height:40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;">500</span>
</p>
<p style="margin-top:20px ;">设置高度
<span id="a" style="width: 40px;height:40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;" >200</span>
<span id="b" style="width: 40px;height:40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;">400</span>
<span id="c" style="width: 40px;height: 40px;display: inline-block;border: 1px solid #000000;line-height: 40px;text-align: center;">500</span>
</p>
<p style="margin-top:20px;" >
<button type="button" id="reset" style="width: 50px; background: #00C1CF;margin-left: 30px;">恢复</button>
<button type="button" id="mytrue" style="width: 50px; background: #00C1CF;margin-left: 100px;">确定</button>
</p>
</div>
</div>
</div>
<script type="text/javascript">
var btn=document.getElementById('btn');
var bigBox=document.getElementById('bigBox');
var myclick=document.getElementById('myclick');
var red=document.getElementById('red');
var green=document.getElementById('green');
var yellow=document.getElementById('yellow');
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var a=document.getElementById('a');
var b=document.getElementById('b');
var c=document.getElementById('c');
var reset=document.getElementById('reset');
var mytrue=document.getElementById('mytrue');
red.onclick=function(){
myclick.style.background="red";
}
green.onclick=function(){
myclick.style.background="green";
}
yellow.onclick=function(){
myclick.style.background="yellow";
}
one.onclick=function(){
myclick.style.width="200px";
}
two.onclick=function(){
myclick.style.width="400px";
}
three.onclick=function(){
myclick.style.width="500px";
}
a.onclick=function(){
myclick.style.height="200px";
}
b.onclick=function(){
myclick.style.height="400px";
}
c.onclick=function(){
myclick.style.height="500px";
}
btn.onclick=function(){
bigBox.style.display="block";
}
reset.onclick=function(){
myclick.style.width="100px";
myclick.style.height="100px";
myclick.style.background="white";
}
mytrue.onclick=function(){
bigBox.style.display="none";
}
</script>
</body>
</html>