全棧JavaScript之路（ 二十五 ）訪問元素的樣式

2014/07/11 來源：CSDN博客

任何支持style 特性的元素在 ，在其DOM 節點 對象中都有一個 style 屬性與之對應。 這個style 對象是 CSSStyleDeclaration類型的實例，包含著html style特性的所有樣式信息。但不包含 外部樣式或者 內嵌樣式層疊而來的樣式。

在style特性中，提定的任何css屬性，都將表現為這個style 對象的屬性。對於使用短劃線的的屬性名，必須轉化為駝峰大小寫形式，多數情況下都可以這樣轉換。

也有例外， float 是javascript 關鍵字，不能直接轉換，在ie中 轉換為 styleFloat,在其它瀏覽器中，轉換為 cssFloat.

1. dom2 來style對象定義了一些屬性與方法

1. cssText: 通過它可以訪問style特性中的代碼
2. length: 應用給元素的CSS屬性的數量
3. parentRule: 表示CSS信息的CSSRule 對象
4. getPropertyValue(propertyName): 返回 指定屬性的值。
5. getPropertyCSSvalue(propertyName):返回包含 給點屬性值的 CSSValue 對象。（{cssValueType:'',cssText:""}）
6. getPropertyPriority(propertyName): 如果給點的屬生使用了 !mportant,則返回 importtant 如果沒有，則返回 空字符串。
7. item(index),返回指定位置的CSS屬性的名稱
8. removeProperty(propertyName);從樣式中刪除給點屬性
9. setProperty(propentyName,value,priority),將給定屬性設為指定的值，並加上優先權(空字串或者 !important)

2. 計算樣式: 「DOM2 級樣式」增強了document.defaultView，提供了 getComputedStyle方法。

這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字符串（例如":after"）。

如果不需要偽元素信息，第二個參數可以是null。getComputedStyle方法返回一個CSSStyleDeclaration 對象（與style 屬性的類型相同），其中包含當前元素的所有計算的樣式。 (IE 中 沒有 getComputedStyle方法，但是在IE中，每個有style屬性的元素 都有一個 currentStyle 屬性， 它是CSSStyleDeclaration 類型的實例)

邊框屬性可能會也可能不會返回樣式表中實際的border 規則（Opera 會返回，但其他瀏覽器不會）。

存在這個差別的原因是不同瀏覽器解釋綜合（rollup）屬性（如border）的方式不同，

因為設置這種屬性實際上會涉及很多其他屬性。在設置border 時， 實際上是設置了四個邊的邊框寬度、顏色、樣式屬性（ border-left-width 、border-top-color 、border-bottom-style ， 等等）。

因此， 即使computedStyle.border 不會在所有瀏覽器中都返回值，但computedStyle.borderLeftWidth 會返回值。

免責聲明：本文內容來源于CSDN博客，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。