说明：代码来自网络。注释为笔者学习时添加。
<!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="background" /></p> <p><label>属性值：</label><input type="text" value="blue" /></p> <p><label></label><button>确定</button><button>重置</button></p> </div> <div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div> </body> </html>