<!DOCTYPE html>
<html>
<head>
<title>函数传参改变Div属性的值</title>
<style type="text/css">
*{ margin: 0px; padding: 0px; text-align: center; }
.bpp3{ margin: 20px 400px; width: 250px; height: 280px; position: relative; }
.bpp3 input{ width: 150px; height: 30px; margin: 5px; }
.bpp3 button{ width: 55px; height: 30px; margin: 20px; margin-top: 5px; float: right; }
#Div{ width: 150px; height: 150px; background: black; position: absolute; bottom: 0px; left: 80px; color: #ffffff; font:12px/1.5 Tahoma; }
</style>
</head>
<body>
<div class="bpp3">
<label>
属性名：<input type="text" value="background" /><br>
属性值：<input type="text" value="red" /><br>
</label>
<button>重置</button>
<button>确定</button>
<div id="Div">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
</div>
<script type="text/javascript">
// 传参函数
var changestyle = function(element, attribute, value){
element.style[attribute] = value;
}
window.onload = function(){
// 获取元素
var Iname = document.getElementsByTagName("label")[0].getElementsByTagName("input");
var Ibtn = document.getElementsByClassName("bpp3")[0].getElementsByTagName("button");
var Div = document.getElementById("Div");
// 按钮的点击事件
Ibtn[1].onclick = function(){
changestyle(Div, Iname[0].value, Iname[1].value);
}
Ibtn[0].onclick = function(){
Div.removeAttribute("style");
}
}
</script>
</body>
</html>效果图：
