<!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:</