咱們來翻翻元素樣式的族譜-getComputedStyle

你們應該很是熟悉jQuery的css()方法,那麼如何在不引用jQuery的狀況下一樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法.

做者：Icarus
原文連接：咱們來翻翻元素樣式的族譜-getComputedStyle

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()方法能夠獲取當前元素全部最終使用的CSS屬性值.返回的是一個CSS樣式聲明對象(object CSSStyleDeclaration),只讀.也就是說,獲取到的不只僅是咱們自定義的樣式,它包含了全部做用在當前元素上的css屬性及屬性值.

語法

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

其中element是必需的參數,表明獲取樣式的元素.pseudoElt是僞類參數,在Gecko2.0以前是必填項,但在現代瀏覽已經不是了,若是不是僞類的話,設置爲null便可.

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

舉個栗子

不包含僞類

假設頁面上存在一個id爲id的元素,使用getComputedStyle方法獲取到的元素樣式以下所示:

包含僞類

<style>
 h3::after {
   content: 'rocks!';
 }
</style>

<h3>generated content</h3>

<script>
  var h3       = document.querySelector('h3'),
      result   = getComputedStyle(h3, ':after').content;

  console.log(result); // returns 'rocks!'
</script>

兼容性

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

由上圖可知,getComputedStyle的兼容性很不錯,基本支持全部的現代瀏覽器.固然IE瀏覽器自有他的脾氣,在IE9如下有另外一套功能類似的API,暫且不提.

獲取特定屬性值

在上面的栗子中,咱們能夠看到getComputedStyle返回的是樣式聲明對象,包含了元素全部的樣式值,那麼咱們如何獲取到想要的屬性值呢?有兩種方法能夠實現這一需求:

• window.getPropertyValue()

• 鍵值訪問

getPropertyValue

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

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

能夠很是方便的獲取到咱們想要的屬性值.須要注意:不支持駝峯命名,屬性名按照css的寫法,如background-color:

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

兼容性

除IE9如下瀏覽器,其他現代瀏覽器均支持.

鍵值訪問

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

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

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

IE9如下的替代方法

getComputedStyle和currentStyle

currentStyle是IE瀏覽器特有的的一個屬性,element.currentStyle返回的一樣是全部元素當前應用的最終CSS屬性值.可是其中獲取到的屬性名會存在差別,如上說起的styleFloat和cssFloat.

不過,currentStyle屬性不支持僞類樣式獲取,這是與getComputedStyle方法的重要差別,也是jQuery中css()方法沒法獲取僞類元素屬性的緣由.

假設頁面上有一個id爲test的元素,示例以下:

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

getPropertyValue和getAttribute

在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');

getComputedStyle和style的區別

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

只讀與可寫

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

獲取的對象範圍

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

• 內聯樣式 (inline Style): 是寫在HTML標籤的style屬性裏面的,內嵌樣式只對該標籤有效.

• 內部樣式 (internal Style Sheet): 是寫在HTML文檔的style標籤裏面的,內部樣式只對當前頁面有效.

• 外部樣式表 (External Style Sheet): 若是不少網頁須要用到一樣的樣式,將樣式寫在一個以.CSS爲後綴的CSS文件裏,而後在每一個須要用到這些樣式的網頁裏引用這個CSS文件.也就是說,getComputedStyle獲取到的是全部最終在元素上應用的樣式屬性,而element.style僅僅獲取的是咱們人爲編寫的樣式.
  咱們來作一個測試,對於一個光禿禿的沒有任何樣式設置的元素p,getComputedStyle方法返回對象中length屬性值和element.style的區別.

<p></p>

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

很容易看出二者的區別.

getComputedStyle與defaultView

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已經退出歷史舞臺,不用過於在乎.

小結

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

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

• currentStyle
  只讀,IE6-8獲取全部做用樣式,使用getAttribute來獲取特定屬性.

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

參考資料

• Window.getComputedStyle()-MDN

• 原生JS getComputedStyle等方法解析

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