一、getComputedStyle是？
getComputedStyle是一個能夠獵取當前元素一切終究運用的CSS屬性值。返回的是一個CSS款式聲明對象([object CSSStyleDeclaration])，只讀。

getComputedStyle() gives the final used values of all the CSS properties of an element.

語法以下：

var style = window.getComputedStyle(“元素”, “偽類”);
比方：

var dom = document.getElementById(“test”),

style = window.getComputedStyle(dom , ":after");

就兩個參數，人人都懂中文的，沒什麼好說的。只是分外提醒下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二個參數“偽類”是必須的（假如不是偽類，設置為null），不過如今嘛，不是必須參數了。

二、getComputedStyle與style的區分
我們運用element.style也能夠獵取元素的CSS款式聲明對象，然則其與getComputedStyle要領另有有一些差異的。

只讀與可寫
正如上面提到的getComputedStyle要領是只讀的，只能獵取款式，不能設置；而element.style能讀能寫，能屈能伸。
獵取的對象局限
getComputedStyle要領獵取的是終究運用在元素上的一切CSS屬性對象（縱然沒有CSS代碼，也會把默許的祖宗八代都顯現出來）；而element.style只能獵取元素style屬性中的CSS款式。因而關於一個光溜溜的元素<p>，getComputedStyle要領返回對象中length屬性值（假如有）就是190+(據我測試FF:192, IE9:195, Chrome:253, 差異環境效果能夠有差異), 而element.style就是0。
三、getComputedStyle與defaultView
假如我們檢察jQuery源代碼，會發明，其css()要領完成不是運用的window.getComputedStyle而是document.defaultView.getComputedStyle，唷？這是怎樣一回事？
jQuery源碼運用document.defaultView.getComputedStyle截圖證實

現實上，運用defaultView基礎上是沒有必要的，getComputedStyle自身就存在window對象當中。依據DennisHall的說法，運用defaultView能夠一是人們不太樂意在window上特地寫個東西，二是讓API在Java中也可用（這我不懂，忘指導~~）。

不過有個特殊情況，在FireFox3.6上不運用defaultView要領就搞不定的，就是接見框架(frame)的款式.

四、getComputedStyle兼容性
關於桌面裝備：

 Chrome    Firefox (Gecko)    Internet Explorer    Opera    Safari

基礎支撐 支撐 支撐 9 支撐 支撐
偽類元素支撐 支撐 支撐 不支撐 不支撐 支撐
關於手機裝備：

 Android    Firefox Mobile (Gecko)    IE Mobile    Opera Mobile    Safari Mobile

基礎支撐 支撐 支撐 WP7 Mango 支撐 支撐
偽元素支撐 ? ? 不支撐 ? ?
上面打問號的示意沒有測試，是不是兼容不知。假如您輕易測試，迎接將測試效果示知，這裏將實時更新，並附上您的姓名，以謝您做的孝敬。

我們先把注意力放在桌面裝備上，能夠看到，getComputedStyle要領IE6~8是不支撐的，得，背了半天的媳婦，發明是孫悟空變的——憂鬱了。不急，IE自有本身的一套東西。

五、getComputedStyle與currentStyle
currentStyle是IE瀏覽器自娛自樂的一個屬性，其與element.style能夠說是嫡親，至少在運用情勢上相似，element.currentStyle，差異在於element.currentStyle返回的是元素當前運用的終究CSS屬性值（包含外鏈CSS文件，頁面中嵌入的<style>屬性等）。

因而，從作用大將，getComputedStyle要領與currentStyle屬性走的很近，情勢上則style與currentStyle走的近。不過，currentStyle屬性貌似不支撐偽類款式獵取，這是與getComputedStyle要領的差異，也是jQuery css()要領沒法表現的一點。

//zxx: 假如你只知jQuery css()要領，你是不會曉得偽類款式也是能夠獵取的，雖然部份瀏覽器不支撐。

比方，我們要獵取一個元素的高度，能夠相似下面的代碼：

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
您能夠狠狠地點擊這裏：運用getComputedStyle和currentStyle 獵取元素高度demo

效果FireFox下顯現24px(經由盤算了), 而IE瀏覽器下則是CSS中的2em屬性值：
Firefox下顯現的盤算后的24px值 張鑫旭-鑫空間-鑫生涯 IE9下顯現的CSS中的2em值 張鑫旭-鑫空間-鑫生涯

getComputedStyle要領與currentStyle屬性其他詳細差異另有許多，我以一個一般按鈕做元素，遍歷了个中靠譜的屬性名和屬性值，您能夠狠狠地點擊這裏：getComputedStyle和currentStyle屬性展現demo

細緻對照檢察，我們能夠看到不少差異，比方浮動屬性，FireFox瀏覽器下是這個(cssFloat)：
FireFox下的浮動屬性名

IE7瀏覽器下則是styleFloat ：
IE7瀏覽器下的styleFloat屬性 張鑫旭-鑫空間-鑫生涯

而IE9瀏覽器下則是cssFloat和styleFloat都有。

等其他N多差異。

六、getPropertyValue要領
getPropertyValue要領能夠獵取CSS款式說明對象上的屬性值（直接屬性稱號），比方：

window.getComputedStyle(element, null).getPropertyValue(“float”);
假如我們不運用getPropertyValue要領，直接運用鍵值接見，實在也是能夠的。然則，比方這裏的的float，假如運用鍵值接見，則不能直接運用getComputedStyle(element, null).float，而應該是cssFloat與styleFloat，天然須要瀏覽器判斷了，比較折騰！

運用getPropertyValue要領沒必要能夠駝峰謄寫情勢（不支撐駝峰寫法），比方：style.getPropertyValue(“border-top-left-radius”);

兼容性
getPropertyValue要領IE9+以及其他當代瀏覽器都支撐，見下錶：

 Chrome    Firefox (Gecko)    Internet Explorer    Opera    Safari

基礎支撐 支撐 支撐 9 支撐 支撐
OK，一涉及到兼容性問題(IE6-8腫么辦)，覺得頭最先輕輕作痛了~~，不急，IE自在一套本身的套路，就是getAttribute要領。

七、getPropertyValue和getAttribute
在老的IE瀏覽器（包含最新的），getAttribute要領供應了與getPropertyValue要領相似的功用，能夠接見CSS款式對象的屬性。用法與getPropertyValue相似：

style.getAttribute(“float”);
注意到沒，運用getAttribute要領也不須要cssFloat與styleFloat的奇異寫法與兼容性處置懲罰。不過，照樣有一點差異的，就是屬性名須要駝峰寫法，以下：

style.getAttribute(“backgroundColor”);
假如不斟酌IE6瀏覽器，貌似也是能夠這麼寫：

style.getAttribute(“background-color”);
實例才是霸道，您能夠狠狠地點擊這裏：getPropertyValue和getAttribute獵取背景色demo

效果FireFox下自始自終的rgb色彩返回(Chrome也是返回rgb色彩)：
FireFox瀏覽器下自始自終的RGB色彩返回 張鑫旭-鑫空間-鑫生涯

關於IE9瀏覽器，雖然運用的是currentStyle, 然則從效果上來說，currentStyle返回的對象是完整支撐getPropertyValue要領的。

八、getPropertyValue和getPropertyCSSValue
從長相上看getPropertyCSSValue與getPropertyValue是嫡親，但現實上，getPropertyCSSValue要惡劣的多。

getPropertyCSSValue要領返回一個CSS最初值(CSSPrimitiveValue)對象(width, height, left, …)或CSS值列表(CSSValueList)對象(backgroundColor, fontSize, …)，這取決於style屬性值的範例。在某些特別的style屬性下，其返回的是自定義對象。該自定義對象繼續於CSSValue對象（就是上面所說的getComputedStyle以及currentStyle返回對象）。

getPropertyCSSValue要領兼容性不好，IE9瀏覽器不支撐，Opera瀏覽器也不支撐（現實支撐，只是老是拋出非常）。而且，雖然FireFox中，style對象支撐getPropertyCSSValue要領，但老是返回null. 因而，現在來說，getPropertyCSSValue要領能夠先不理不睬。

九、補充~結語
有了jQuery等優異庫，我們有熟習底層的getComputedStyle要領的必要嗎？

現實上，本文一向沒有深切睜開getComputedStyle要領一個很主要的，相似css()要領沒有的功用——獵取偽類元素款式。但從這一點大將，熟習getComputedStyle要領有必要。
本文轉載之張鑫旭的博客