js实现在input框里面输入属性和值，页面的
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{ /*div容器，左右置中*/
width:300px;
margin:0 auto;
}
p{
margin-bottom:10px;/*下外边距*/
}
label{
width:5em;/*60像素*/
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>
// 此函数接收３个参数：元素对象，属性名，属性值，把值赋给属性
var changeStyle = function (elem, name, value) {
elem.style[name] = value;
}
window.onload = function () {
var oDiv = document.getElementById("div1");//获取div元素引用
var oBtn = document.getElementsByTagName("button"); //获取按钮的引用
var oInput = document.getElementsByTagName("input"); //获取input元素的引用
oBtn[0].onclick = function () { //给确定按钮添加事件
changeStyle(oDiv, oInput[0].value, oInput[1].value);//调用changeStyle函数
};
oBtn[1].onclick = function () { //给重置按钮添加事件处理
oDiv.removeAttribute("style");//去除样式
}
}
</script>
</head>
<body>
<!--div容器-->
<div id="outer">
<p><label>属性名：</label><input type="text" value="" /></p>
<p><label>属性值：</label><input type="text" value="" /></p>
<p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
</body>
</html>
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：473819131。
