DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript實例代碼:JS控制DIV屬性
Javascript實例代碼:JS控制DIV屬性
編輯:關於JavaScript     

點擊按鈕改變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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved