本文主要介绍简单实现控制div属性，该例子也可作为闭包的一个实例（虽然对于闭包仍然知之不详），同时记录实现过程的一些思考。
简单demo地址
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div块简单控制</title>
<style type="text/css">
#buttonDiv button{height: 50px;width: 100px;background-color: #ccc;margin:0 auto;text-align: center;}
#theDivBlock{height: 400px;width: 400px;background: #aaa;margin:10px auto;display: block;}
</style>
<script type="text/javascript">
//创建一个函数，在后续onclick事件中直接调用
var changeStyle=function(elem,attr,valu){
elem.style[attr]=valu
};
window.onload=function(){
//取得并设置相应的变量，oBtn保存的是一个nodelist集合
var oBtn=document.getElementsByTagName("input");
var oDiv=document.getElementById("theDivBlock");
var oAtt=["width","height","background","display","display"];
var oVal=["500px","500px","green","none","none"];
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
//设置onclick函数，注意onclick中c为小写字母
oBtn[i].onclick=function()
{
this.index==oBtn.length-1&&(oDiv.style.cssText="");
changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
}
}
};
</script>
</head>
<body>
<div id="buttonDiv">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="改变背景" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
</div>
<div id="theDivBlock"></div>
</body>
</html>
代码解析
关键点1：this.index==oBtn.length-1&&(oDiv.style.cssText="") 具体如何理解？
解析：&&操作符的短路用法：如果 && 左边的操作数（表达式）的值相当于false，则不对右边的操作数进行判断，直接返回 false。此处，只有当this.index==oBtn.length-1的值为true时，执行oDiv.style.cssText=""。
但是这种用法不提倡，可等价于
if(this.index==oBtn.length-1){
oDiv.style.cssText="";
}else{
changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
}
关键点2：如果把 changeStyle(oDiv, Attr[this.index], Val[this.index]) 中的this.index直接以i代替，可以发现，按键的onclick事件没有任何反应，原因？
解析：问题出现在闭包上，问题分析如下：
1. 我给每个button的onclick动作都绑定了一个function
2. 我点击button，就要调用这个function
3. 这个function执行到changeSytle，开始寻找参数
4. 参数中有变量 i， i 是多少？
5. 先从当前的匿名函数的作用域找 i，没有找到
6. 接着到window.onload 绑定的匿名函数去找（注意javascript里面没有块级作用域概念），找到 i
7. i 是多少？ i = oBtn.length，因为 window.onload 绑定的匿名函数返回后， 变量 i 的值是 oBtn.length
8. 这正是onclick绑定的匿名函数的作用域链中保存的 i 引用的值
关键点3：oDiv.style.cssText="" 这一句怎么实现重置效果？
解析：我个人的理解，可能跟JavaScript的作用域有关，用以下代码进行了简单的试验，试验结果如图
if(this.index==oBtn.length-1){
oDiv.style.cssText="";
alert(oDiv.style.cssText);
}else{
changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
alert(oDiv.style.cssText);
}
加载完成页面的oDiv.style.cssText，可以看到，显示为空。
1.JPG
先点击宽度，后点击高度按钮，oDiv.style.cssText显示如图。
2.JPG
按顺序点击宽度、高度、隐藏按钮，oDiv.style.cssText显示如图。
3.JPG
关键点4：oAtt oVal两个变量的最后一个value其实并没有应用到，我试验了一下，去掉也没有影响，那么如果真的去掉会造成什么问题吗？
解析：根据我目前浅显的理论知识，我觉得最后两个变量去掉并不会有影响，但是又觉得应该保留最后的display跟block，所以到底可否去掉呢？
网友评论