使用Dom操縱樣式表

XHTML中的每一個元素對象都有一個屬性對象style，該對象包含了元素的全部CSS樣式。對於每一個CSS樣式，style對象都有相關的屬性與之對應，只是格式有所不一樣：對單個詞的CSS樣式，style對象用相同的屬性名對應（CSS中的color對應style.color）；對於兩個詞的樣式，style對象用去掉兩個詞之間的鏈接線，而且第二個詞的首字母大些的屬性名對應（CSS中的background_color樣式對應style.backgroundColor）。

 

下面是幾個經常使用的CSS樣式和style屬性的對應表：

 

 

CSS樣式                                                 Style對象屬性

 

background_color                                    style.backgoundColor

color                                                       style.color

font                                                        style.font

font-family                                               style.fontFamily 

font-weight                                              style.fontWeight

 

 

當屬性名有2個單詞以上時就要使用駝峯命名。

 

如將一個id="div1"的CSS邊框屬性更改成"1px solid red",背景色改成green： 

var oDiv = document.getElementByIdx_xx_x("div1");

oDiv.style.border = "1px solid red";

oDiv.style.backgroundColor = green;

 

DOM爲style提供了幾種方法：

1. getPropertyValue(propertyName) -- 返回CSS屬性的屬性值的字符串值。

2. getPropertyPriority() -- 若是CSS屬性規則指定了"！import",則返回字符串 "!import",不然返回空字符串。

3. item(index) -- 返回指定索引的CSS屬性名稱。

4. removeProperty(propertyName) -- 從CSS定義中刪除propertyName。

5. setProperty(propertyName,value,priority) -- 設置CSS屬性propertyName爲value 以及給定的優先級。

 

操做外部樣式表及style元素中的樣式

 

DOM指定了一個樣式表對象，該對象以下屬性：

1. disabled -- 指示樣式表是否disabled；

2. href -- 外部樣式表的URL；

3. media -- 在media屬性中指定的可使用樣式表的媒體類型列表；

4. ownerNode -- 指定樣式表的DOM節點（或元素）；

5. parentStyleSheet -- 若是樣式表被包含在CSS@import語句中，本屬性指向語句 發現的樣式；

6. title -- 經過HTML的title屬性指定的樣式列表；

7. type -- 樣式表的mime類型。

訪問DOM瀏覽器樣式表規則使用cssRules集合；訪問IE樣式規則使用rules集合。

如判斷使用哪一個集合名：

var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

 

最終樣式表：

最終在屏幕中顯示的樣式被成爲最終的樣式。是終顯示樣式由內聯樣式和CSS規則共同組成；IE和DOM具備不一樣的處理方式。
    IE：
    在每一個元素上提供currentStyle對象；
    能夠用currentStyle獲得內部樣式和外部樣式規則屬性；
    currentStyle是隻讀屬性；
    alert(div1.currentStyle.backgroundColor);

    DOM：
    document.defaultView.getComputedStyle(div,null).backgroundColor；

 

IE瀏覽器直接經過元素的currentStyle屬性獲取當前樣式，而DOM須要調用document.defaultView的getComputedStyle方法獲取，該方法帶兩個參數，第一個參數是須要獲取當前樣式的元素對象，第二個參數是僞元素，如：hover或：first-letter,若是不須要，第二個參數能夠不用輸入，直接是null。 

獲取到當前樣式對象後，就能夠直接獲取樣式的全部屬性的值。值得注意的是，當前樣式的屬性值只讀，也就是說只能獲取，不能修改