【每日一題】如何獲取DOM元素的實際樣式值

實際的樣式值

實際的樣式值：可以理解為瀏覽器的最終計算樣式

CSSStyleDeclaration對象

平時我們獲取DOM元素的style 對象，它里邊僅包含我們給元素設(shè)置的style屬性的樣式信息，但不包含從其他樣式表層疊繼承的、同樣影響該元素的樣式信息CSSStyleDeclaration對象（與從元素的 style (en-US)  屬性返回的對象具有相同的類型）。

但是我們往下翻CSSStyleDeclaration對象，可以看到樣式表里設(shè)置的direction屬性是拿不到值的。

getComputedStyle() 方法

DOM2 Style 在 document.defaultView 上增加了 getComputedStyle()方法。用于獲取元素的所有CSS屬性的值。

入?yún)?/span>

這個方法接收兩個參數(shù):
1、要獲取計算樣式的DOM元素（必須是Element對象）
2、偽元素字符串(如":after")，如果不需要查詢偽元素，則第二個參數(shù)可以傳遞null

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

出參

getComputedStyle()方法返回一個 返回的style是一個實時的 CSSStyleDeclaration 對象，包含元素的計算樣式。但是這些樣式是只讀的。

實時的概念是：當(dāng)元素的樣式更改時，它會自動更新本身。

與偽元素使用

這恐怕是這個方法最強大的地方了，他可以讓你從偽元素拉取樣式信息 (比如, ::after, ::before, ::marker, ::line-marker）。

看個例子：下圖這個元素的偽元素上，有好多樣式表里設(shè)置的屬性，我們來獲取一下

使用注意

方法調(diào)用

在firefox3.6上訪問子框架內(nèi)的樣式，必須要通過 document.defaultView 對象來調(diào)用。

其他情況用window訪問即可

屬性獲取

上邊background我們是直接獲取的簡寫，但實際這個對象存儲的各個屬性名字有小駝峰也有中橫線命名，兩種方式都可以獲取

beforeStyle['background-size']
// 或者
beforeStyle.backgroundSize

兼容寫法

function getStyleByAttr(obj, name) {
  return window.getComputedStyle ?
    window.getComputedStyle(obj, null)[name] :
    obj.currentStyle[name];
}

兼容性

這么說吧，隨便用