Dom樣式編程

字號:


    Dom樣式編程,簡單的理解就是通過javascript來操作頁面元素的屬性,來改變頁面顯示效果。頁面中通過引入style對象來管理元素的css屬性。Dom也采用style對象來管理。
    style對象包含與每個CSS樣式對應的特性,雖然格式不同,單個單詞的css樣式,以相同名字的特性來表示,但是style對象中,兩個單詞的樣式的表示方式是通過將第一個單詞加
    上首字母大寫的第二個殘次,并且單詞間沒有橫杠。
    下面列出了一些常用的CSS特性以及她們對應的javascript中style對象的表示
    CSS樣式特性 javascript樣式特性
    background-color style.backgroundColor
    color style.color
    font style.font
    font-family style.fontFanmily
    font-weight style.fontWeight
    以上是舉了幾個簡單的例子。
    <html>
    <title>網(wǎng)站制作學習網(wǎng)</title>
    <head>
    <script language="javascript">
    function forasp_cn()
    {
    var forasp_cn_div = document.getElementById("forasp_div");
    alert("原來顏色是"+forasp_cn_div.style.backgroundColor+"\n點擊后變?yōu)間reen");
    forasp_cn_div.style.backgroundColor = "green";
    }
    </script>
    </head>
    <body>
    <div id="forasp_div" onclick= "forasp_cn();">網(wǎng)站制作學習網(wǎng)點擊看看</div>
    </body>
    </html>
    style對象還有cssText特性,這個特性包含了所有描述元素樣式的CSS字符串。
    用法:對象.style.cssText。這樣就獲取了全部的style的樣式內(nèi)容。
    Dom樣式的方法
    getPropertyValue(properyName)-返回CSS特性propertyName的字符串值。特性必須按照CSS樣式定義。例如"background-color"而不是"backgroundColor";
    getPropertyPriority()-如果在規(guī)則中指定特性important,則返回important,否則返回空的字符串。
    item(index)-返回在給定索引的index處的css特性的名稱,稱"background-color";
    removeProperty(propertyName)-從CSS定義中刪除propertyName
    setProperty(propertyName,value,priority)-按照指定的優(yōu)先級priority來設置CSS特性propertyName的value值(priority的值可以為impertinent或者為空字符串)