js练习-控制div属性

要开始练练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/