JS - 獲取CSS屬性值 getComputedStyle()與currentStyle()、style()方法

在對網頁進行除錯的過程中，經常會用到js來獲取元素的CSS樣式，

1. obj.style：

這個方法JS只能獲取寫在html標籤中的寫在style屬性中的值（style=”…”），而無法獲取定義在<style type="text/css">裡面的屬性。

2.Window.getComputedStyle()

• 返回一個物件，該物件在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的所有CSS屬性的值。
• 私有的CSS屬性值可以通過物件提供的API或通過簡單地使用CSS屬性名稱進行索引來訪問。
• getComputedStyle獲取的是計算機（瀏覽器）計算後的樣式，但是不相容IE6、7、8

語法：

let style = window.getComputedStyle(element, [pseudoElt]);

element： 用於獲取計算樣式的Element。

pseudoElt 可選：指定一個要匹配的偽元素的字串。必須對普通元素省略（或null）。

返回的style是一個實時的 CSSStyleDeclaration物件，當元素的樣式更改時，它會自動更新本身。

（CSSStyleDeclaration 介面表示一個物件，它是一個 CSS 宣告塊，CSS 屬性鍵值對的集合。它暴露了樣式資訊和各種與樣式相關的方法和屬性。）

3.Element.currentStyle

Element.currentStyle 是一個與Window.getComputedStyle()方法功能相同的屬性。這個屬性實現在舊版本的IE瀏覽器中.

---

屬性判斷法、版本檢測法來解決瀏覽器間的相容性問題

    function getStyle(obj, arr) {
            if (obj.currentStyle) {
                return obj.currentStyle[arr]; //針對ie
            } else {
                return document.defaultView.getComputedStyle(obj, null)[arr];
            }
        }

or:

  function getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
        }

注意：

• 如果用以上的方法獲取某個元素的複合樣式，例如background，那麼就不要用上面那種方式獲取，在不同瀏覽器間有相容性問題。用上面的方法獲得單一樣式，而不要用來獲取複合樣式。
• 使用以上方法，注意不要多按空格
• 使用以上方法，不要獲取未設定後的樣式，因為瀏覽器間不相容
• 在火狐4.0之前，有個bug，如果getComputedStyle後面不跟引數，會出現問題，所以有些人寫成getComputedStyle(obj, false)，那個false就是為了解決這個bug。這裡的bug也可以寫成0，或者其他任何引數都可以。不過目前火狐的瀏覽器都比較高，因此這個問題已經不是很常見了。