要开始练练js了，决定先按照Ferris大大的索引表一个个练，头一个就是控制div属性啦。看似挺简单的，不过平时jquery用惯了，用起来原生js还有点手生呢。
总之就是模仿加练习啦，先看看效果：
一、结构就是这样啦：（就是喜欢用a标签，任性。）
<div id="smallBox01"> <a href="#" class="button01">变宽</a> <a href="#" class="button01">变高</a> <a href="#" class="button01">变色</a> <a href="#" class="button01">隐藏</a> <a href="#" class="button01">重置</a> </div> <div id="changeBox01"></div>
二、样式呢
#changeBox01{height: 100px;width: 100px;background-color:#77948d;}
原先盒子的宽高，背景色（其他都不是重点啦）
三、js实现
window.onload=function(){ practice01(); }; var practice01=function(){ //取到按钮的父元素 var oControl=document.getElementById('smallBox01'); //取到每一个a标签 var oBtn=oControl.getElementsByTagName('a'); // 取到要改变的盒子 var oDiv=document.getElementById('changeBox01'); //建立一个二维数组存放分别每个按钮要改变的样式和样式值 var oAtt=[["width","200px"],["height","200px"],["background","#6E5794"],["display","none"],["display","block"]]; //创建改变样式的值 function changeStyle(elem,attr,value){ elem.style[attr]=value; } //遍历a标签 for (var i = 0; i < oBtn.length; i++) { //设置对应的index oBtn[i].index=i; //绑定点击事件 oBtn[i].onclick=function(){ //重置按钮，清空之前的样式 this.index==oBtn.length-1 &&(oDiv.style.cssText=""); //改变对应的样式 changeStyle(oDiv,oAtt[this.index][0],oAtt[this.index][1]); }; } };
我想注解的挺清楚了吧。
四、原作中的这句 this.index==oBtn.length-1 &&(oDiv.style.cssText="");
刚开始理解了半天，后来百度才知道。是指前半句this.index==oBtn.length-1为true时，执行下半句
也就是当遍历到重置按钮时，先清除之前添加的样式
用“与”（&&）代替了if判断语句，小技巧get。
总结：这算是最最基础的js练习了，模仿过一遍熟悉了通过js控制css样式改变（太懒了，变量名都抄原作的……下次不这样了，囧）
在线查看：wzlinsen.com/js.html#js01 Ferris大大原作：http://fgm.cc/learn/
个人简历：wzlinsen.com
转载请注明来自：http://www.cnblogs.com/wzls/