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

不論什麼支持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 假設沒有，則返回 空字符串。
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 會返回值。