源代码见：

&&和||的理解

a || b：如果a是true，那么b不管是true还是false，都返回true。因此不用判断b了，这个时候刚好判断到a，因此返回a。

　　　如果a是false，那么就要判断b，如果b是true，那么返回true，如果b是false，返回false，其实不就是返回b了吗。

a && b：如果a是false，那么b不管是true还是false，都返回false，因此不用判断b了，这个时候刚好判断到a，因此返回a。

　　　如果a是true，那么就要在判断b，和刚刚一样，不管b是true是false，都返回b。

判断逻辑，因为重置按钮需要清空之前的style，这里用if语句也可以，但是比较繁琐，所以采用了与门操作符，好处就是代码量比较少。

this.index === btns.length - 1 && (content.style.cssText = "");

循环逻辑，因为5个按钮的功能相似，故通过循环的到每个按钮的属性，并改变其对应的值。将 attribute及其对应的 style分别用数组储存

1 function changeAttr(elem, attr, sty) { 2      elem.style[attr] = sty; 3  } 4      window.onload = function () { 5          var content = document.getElementById('content'); 6          var btns = document.getElementsByClassName("btn"); 7          var styles = ["200px", "200px", "red", "none", "block"]; 8          var attrs = ["width", "height", "background", "display", "display"]; 9          for( var i = 0; i < btns.length; i++){10             btns[i].index = i;11             btns[i].onclick = function () {12             this.index === btns.length - 1 && (content.style.cssText = "");13             alert(this.index); 　　　　　　　　　alert(i);//514             changeAttr(content, attrs[this.index], styles[this.index]);//this.index改为i时功能无法实现，由于触发onclick事件时，i已经完成遍历值为515             }16          }17       }

对于上述代码中的红色问题，可用匿名函数（闭包）将每次遍历的 i 值传入函数，使其值始终保持在内存。

1  for(var i=0;i