摘要：大家應(yīng)該非常熟悉的方法那么如何在不引用的情況下同樣實現(xiàn)這個功能呢本文就介紹使用原生來獲取樣式的方法作者原文鏈接我們來翻翻元素樣式的族譜是什么方法可以獲取當(dāng)前元素所有最終使用的屬性值返回的是一個樣式聲明對象只讀也就是說獲取到的不僅僅是我們自

大家應(yīng)該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實現(xiàn)這個功能呢?本文就介紹使用原生JS來獲取樣式的方法.

作者：Icarus
原文鏈接：我們來翻翻元素樣式的族譜-getComputedStyle

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Window.getComputedStyle()方法可以獲取當(dāng)前元素所有最終使用的CSS屬性值.返回的是一個CSS樣式聲明對象(object CSSStyleDeclaration),只讀.也就是說,獲取到的不僅僅是我們自定義的樣式,它包含了所有作用在當(dāng)前元素上的css屬性及屬性值.

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

其中element是必需的參數(shù),代表獲取樣式的元素.pseudoElt是偽類參數(shù),在Gecko2.0之前是必填項,但在現(xiàn)代瀏覽已經(jīng)不是了,如果不是偽類的話,設(shè)置為null即可.

var style = window.getComputedStyle(element, null);

假設(shè)頁面上存在一個id為id的元素,使用getComputedStyle方法獲取到的元素樣式如下所示:

generated content

其中問號部分代表暫無測試,是否兼容暫不確定.

由上圖可知,getComputedStyle的兼容性很不錯,基本支持所有的現(xiàn)代瀏覽器.當(dāng)然IE瀏覽器自有他的脾氣,在IE9以下有另一套功能相似的API,暫且不提.

在上面的栗子中,我們可以看到getComputedStyle返回的是樣式聲明對象,包含了元素所有的樣式值,那么我們?nèi)绾潍@取到想要的屬性值呢?有兩種方法可以實現(xiàn)這一需求:

window.getPropertyValue()

鍵值訪問

getPropertyValue方法可以直接獲取CSS樣式申明對象上的屬性值,例如:

window.getComputedStyle(element, null).getPropertyValue("屬性名");

可以非常方便的獲取到我們想要的屬性值.需要注意:不支持駝峰命名,屬性名按照css的寫法,如background-color:

window.getComputedStyle(element, null).getPropertyValue("background-color");

除IE9以下瀏覽器,其余現(xiàn)代瀏覽器均支持.

通過鍵值訪問來獲取css屬性較為繁瑣,可能需要進行額外的瀏覽器檢測,例如

window.getComputedStyle(element, null).float //錯誤!

這種寫法是錯誤的,原因是float是js的一個保留字,不能直接使用.IE下對應(yīng)的是 styleFloat,firefox,chorme,safari下對應(yīng)的則是cssFloat.相較而言更建議使用getPropertyValue來獲取具體屬性值.

currentStyle是IE瀏覽器特有的的一個屬性,element.currentStyle返回的同樣是所有元素當(dāng)前應(yīng)用的最終CSS屬性值.但是其中獲取到的屬性名會存在差異,如上提及的styleFloat和cssFloat.

不過,currentStyle屬性不支持偽類樣式獲取,這是與getComputedStyle方法的重要差異,也是jQuery中css()方法無法獲取偽類元素屬性的原因.

假設(shè)頁面上有一個id為test的元素,示例如下:

var style = document.getElementById("test").currentStyle;

在IE瀏覽器中的getAttribute方法提供了與getPropertyValue方法類似的功能,配合currentStyle使用,可以訪問CSS樣式對象的屬性,用法與getPropertyValue類似:

element.currentStyle.getAttribute("float");

可以注意到,使用getAttribute同樣不需要進行瀏覽器檢測.但是有一點需要注意:在IE7+的瀏覽器中,getAttribute獲取屬性名可以使用駝峰式命名法,IE6必須使用駝峰式命名方法,如:

// IE7,8兩者均可,IE6必須使用駝峰命名法
element.currentStyle.getAttribute("background-color");
element.currentStyle.getAttribute("backgroundColor");

我們使用element.style也可以獲取元素的CSS樣式聲明對象,但是其與getComputedStyle方法存在一些差異.

上面提到過getComputedStyle方法是只讀的,只能獲取樣式,不能設(shè)置;而element.style能讀能寫,八面玲瓏.

getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對象,即使沒有編寫任何樣式代碼,也會獲取默認的所有樣式的屬性和屬性值;element.style只能獲取元素style屬性中的CSS樣式.
可能這樣說不太好理解,我們回顧一下CSS樣式表的表現(xiàn)形式:

內(nèi)聯(lián)樣式 (inline Style): 是寫在HTML標(biāo)簽的style屬性里面的,內(nèi)嵌樣式只對該標(biāo)簽有效.

內(nèi)部樣式 (internal Style Sheet): 是寫在HTML文檔的style標(biāo)簽里面的,內(nèi)部樣式只對當(dāng)前頁面有效.

外部樣式表 (External Style Sheet): 如果很多網(wǎng)頁需要用到同樣的樣式,將樣式寫在一個以.CSS為后綴的CSS文件里,然后在每個需要用到這些樣式的網(wǎng)頁里引用這個CSS文件.也就是說,getComputedStyle獲取到的是所有最終在元素上應(yīng)用的樣式屬性,而element.style僅僅獲取的是我們?nèi)藶榫帉懙臉邮?
我們來做一個測試,對于一個光禿禿的沒有任何樣式設(shè)置的元素p,getComputedStyle方法返回對象中l(wèi)ength屬性值和element.style的區(qū)別.

var elem = document.querySelector("p");
// 0
elem.style.length
// 261 - chrome 55.0.2883.87
// 249 - firefox 50.0
// 233 - safari 5.1.1
window.getComputedStyle(elem, null).length

很容易看出兩者的區(qū)別.

From mdn

In many code samples online, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It"s likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However, there is a single case where the defaultView"s method must be used: when using Firefox 3.6 to access framed styles.

window.getComputedStyle還有另一種寫法,就是 document.defaultView.getComputedStyle.
實際上,使用defaultView基本上是沒有必要的,getComputedStyle本身就存在window對象之中.使用defaultView可能一是人們不太樂意在window上專門寫個東西,二是讓API在Java中也可用.
不過有個特殊情況,在FireFox3.6上不使用defaultView方法就搞不定的,就是訪問框架(frame)的樣式.不過FireFox3.6已經(jīng)退出歷史舞臺,不用過于在意.

element.style
可讀可寫,但只能獲取到自定義style屬性

window.getComputedStyle/document.defaultView.getComputedStyle
只讀,非IE瀏覽器及IE9+獲取所有作用樣式,使用getPropertyValue來獲取特定屬性.

currentStyle
只讀,IE6-8獲取所有作用樣式,使用getAttribute來獲取特定屬性.

這篇博客主要介紹了getComputedStyle的前世今生,真正要實現(xiàn)jQuery中兼容IE及其它現(xiàn)代瀏覽器的css()方法還需要額外做一些兼容性的處理.限于篇幅,欲知后事如何,且聽下回分解.

Window.getComputedStyle()-MDN

原生JS getComputedStyle等方法解析

獲取元素CSS值之getComputedStyle方法熟悉