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

標籤：java   nts   data-   mod   com   返回   width   方法   priority   

不論什麼支援style 特性的元素在 ，在其DOM  節點 對象中都有一個 style 屬性與之相應。 這個style 對象是 CSSStyleDeclaration類型的執行個體，包括著html style特性的全部樣式資訊。但不包括 外部樣式或者 內嵌樣式層疊而來的樣式。

  在style特性中。提定的不論什麼css屬性，都將表現為這個style 對象的屬性。對於使用短劃線的的屬性名稱。必須轉化為駝峰大寫和小寫形式，多數情況下都能夠這樣轉換。

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

假設元素沒有設定style屬於，哪麼style會有一些預設的屬性。

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 假設沒有，則返回 Null 字元串。
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 會返回值。

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