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/