输入属性名和属性值,会自动修改div的样式,点击重置按钮,会恢复到原来的样式。
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数传参,改变Div任意属性的值</title>
<style>
body,p{margin:0;padding:0;}
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
#outer{width:300px;margin:0 auto;}
p{margin-bottom:10px;}
button{margin-right:5px;}
label{width:5em;display:inline-block;text-align:right;}
input{padding:3px;font-family:inherit;border:1px solid #ccc;}
#div1{
color:#fff;
width:180px;
height:180px;
background:#000;
margin:0 auto;
padding:10px;
}
</style>
<script>
window.onload = function(){
var okBtn = document.getElementById("ok");
var oReset = document.getElementById("reset")
var oDiv = document.getElementById("div1");
okBtn.onclick = function(){
var propname = document.getElementsByName("prop")[0].value;
var propval = document.getElementsByName("val")[0].value;
oDiv.style[propname] = propval;
}
oReset.onclick = function(){//将原来的节点删除,重新添加一个新的div
oDiv.remove();
oDiv = document.createElement("div");
oDiv.id = "div1";
oDiv.innerHTML = '在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。';
document.body.appendChild(oDiv);
}
}
</script>
</head>
<body>
<div id="outer">
<p>
<label>属性名:</label>
<input name="prop" type="text" value="background">
</p>
<p>
<label>属性值:</label>
<input name="val" type="text" value="blue">
</p>
<p>
<label></label>
<button id="ok">确定</button>
<button id="reset">重置</button>
</p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div>
</body>
</html>