Javascript執行個體代碼:JS控制DIV屬性

文章簡介：點擊按鈕改變DIV屬性，通過點擊不同的按鈕設定DIV的樣式。

點擊按鈕改變DIV屬性，通過點擊不同的按鈕設定DIV的樣式。
代碼如下：

<script type="text/javascript">
    var oBox = document.getElementById('box');
    var oDiv = document.getElementById('div1');
    var aInput = document.getElementsByTagName('input');
    var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
    var aValue = ['200px', '200px', 'red', 'none', 'block'];
    for(var len=aInput.length,i=0;i<len;i++){
        aInput[i].index = i;  //索引
        aInput[i].onclick = function(){
            //重設按鈕,cssText清空DIV屬性
            if(this.index == aInput.length - 1)oDiv.style.cssText = "";
            //設定DIV屬性
            property(oDiv, aAttr[this.index], aValue[this.index]);
        };
    }
    //控制DIV屬性
    function property(obj, attr, value){
        obj.style[attr] = value;
    }
</script>