页面布局上,五个按钮用input写,和要改变的div共同嵌在一个父级div里。
script部分:
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};//函数写在了外部,三个参数分别是对象,对象style属性的其中一项(用方括号按属性名查询数组内的项),值
window.onload = function () //加载时完成调用
{
var oBtn = document.getElementsByTagName("input"); //oBtn获取了按钮
var oDiv = document.getElementById("div1"); //oDiv获取了要改变的那个div
var oAtt = ["width","height","background","display","display"]; //oAtt是一个数组,包含了style下的各个属性
var oVal = ["200px","200px","red","none","block"]; //oVal是一个数组,包含各个属性的值
for (var i = 0; i < oBtn.length; i++) //for循环,遍历了每一个按钮(一共五个),i要小于oBtn的长度length即按钮数量
{
oBtn[i].index = i;
oBtn[i].onclick = function () //onclick是在按钮身上的
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); //&&逻辑与,如果前者为true则运行后者。即当循环到了最后一项(重置div按钮),就让div的css重写(cssText)成空"",达到重置效果。(虽然div标签内的style成了"",但是<head>中还有初始化的<style>所以div还原了)
changeStyle(oDiv, oAtt[this.index], oVal[this.index]) //调用外部函数,将div对象,oAtt属性和oVal值传递,数组采用当前this.index
}
}
};
//在onload阶段用for循环让五个按钮获得了各自的onclick。两个数组 属性和值一一对应。