本文引自張鑫旭的博客差购，但是因為太嘮叨了铡羡，所以算是節(jié)選吧轻纪。

getComputedStyle()

getComputedStyle是一個可以獲取當(dāng)前元素所有最終使用的CSS屬性值壶辜。返回的是一個CSS樣式聲明對象([object CSSStyleDeclaration])逞泄，只讀橡羞。
語法：

var style = window.getComputedStyle("元素", "偽類");
//用法：
var dom = document.getElementById("test"),
    style = window.getComputedStyle(dom , ":after");

就兩個參數(shù)眯停，大家都懂中文的，沒什么好說的卿泽。只是額外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前莺债，第二個參數(shù)“偽類”是必需的（如果不是偽類，設(shè)置為null）签夭，不過現(xiàn)在嘛齐邦，不是必需參數(shù)了。

getComputedStyle與style的區(qū)別

我們使用element.style也可以獲取元素的CSS樣式聲明對象第租，但是其與getComputedStyle方法還有有一些差異的措拇。
只讀與可寫
正如上面提到的getComputedStyle方法是只讀的，只能獲取樣式慎宾，不能設(shè)置丐吓；而element.style能讀能寫，能屈能伸趟据。
獲取的對象范圍
getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對象（即使沒有CSS代碼券犁，也會把默認(rèn)的祖宗八代都顯示出來）；而element.style只能獲取元素style屬性中的CSS樣式之宿。因此對于一個光禿禿的元素<p>族操，getComputedStyle方法返回對象中l(wèi)ength屬性值（如果有）就是190+(據(jù)我測試FF:192, IE9:195, Chrome:253, 不同環(huán)境結(jié)果可能有差異), 而element.style就是0。

getComputedStyle與defaultView

如果我們查看jQuery源代碼比被，會發(fā)現(xiàn)色难，其css()方法實現(xiàn)不是使用的window.getComputedStyle而是document.defaultView.getComputedStyle。在FireFox3.6上不使用defaultView方法就搞不定的等缀。

getComputedStyle與currentStyle

currentStyle是IE瀏覽器自娛自樂的一個屬性枷莉，其與element.style可以說是近親，至少在使用形式上類似尺迂，element.currentStyle笤妙，差別在于element.currentStyle返回的是元素當(dāng)前應(yīng)用的最終CSS屬性值（包括外鏈CSS文件，頁面中嵌入的<style>屬性等）噪裕。

因此蹲盘，從作用上將，getComputedStyle方法與currentStyle屬性走的很近膳音，形式上則style與currentStyle走的近召衔。不過，currentStyle屬性貌似不支持偽類樣式獲取祭陷，這是與getComputedStyle方法的差異苍凛，也是jQuery css()方法無法體現(xiàn)的一點。

//張鑫旭: 如果你只知jQuery css()方法兵志，你是不會知道偽類樣式也是可以獲取的醇蝴，雖然部分瀏覽器不支持。

例如想罕，我們要獲取一個元素的高度悠栓，可以類似下面的代碼：

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

這個走個完整代碼，自己測一下：

CSS代碼：
.button {
    height: 2em;
    border: 0;
    border-radius: .2em;
    background-color: #34538b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
HTML代碼：
<input type="button" id="button" class="button" value="點擊我按价，顯示我" />
<p id="detail"></p>
JS代碼：
var oButton = document.getElementById("button"),
    oDetail = document.getElementById("detail");

if (oButton && oDetail) {
    oButton.onclick = function() {
        var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, false);
        
        var key, html = '本按鈕CSS屬性名和屬性值依次為('+ !!this.currentStyle +')：
';
        if (typeof oStyle === "object") {
            for (key in oStyle) {
                if (/^[a-z]/i.test(key) && oStyle[key]) {
                    html = html + '' + key + ":" + oStyle[key] + '';
                }
            }
        } else {
            html += '無法獲取CSS樣式惭适！';
        }
        
        oDetail.innerHTML = html;
    };
}

image.png

getPropertyValue方法

getPropertyValue方法可以獲取CSS樣式申明對象上的屬性值（直接屬性名稱），例如：

window.getComputedStyle(element, null).getPropertyValue("float");

如果我們不使用getPropertyValue方法俘枫，直接使用鍵值訪問腥沽，其實也是可以的。但是鸠蚪，比如這里的的float今阳，如果使用鍵值訪問，則不能直接使用getComputedStyle(element, null).float茅信，而應(yīng)該是cssFloat與styleFloat盾舌，自然需要瀏覽器判斷了，比較折騰蘸鲸！

float浮動屬性妖谴，F(xiàn)ireFox瀏覽器下是這個(cssFloat)：

FireFox下的浮動屬性名

IE7瀏覽器下的styleFloat屬性 張鑫旭-鑫空間-鑫生活

使用getPropertyValue方法不必可以駝峰書寫形式（不支持駝峰寫法）膝舅，例如：style.getPropertyValue("border-top-left-radius");

getPropertyValue方法IE9+以及其他現(xiàn)代瀏覽器都支持

getPropertyValue和getAttribute

getAttribute是ie自有的一套與getPropertyVlaue類似功能的寫法用來兼容ie6-8嗡载。

在老的IE瀏覽器（包括最新的），getAttribute方法提供了與getPropertyValue方法類似的功能仍稀，可以訪問CSS樣式對象的屬性洼滚。用法與getPropertyValue類似：

style.getAttribute("backgroundColor");

注意到?jīng)]，使用getAttribute方法也不需要cssFloat與styleFloat的怪異寫法與兼容性處理技潘。不過遥巴，還是有一點差異的，就是屬性名需要駝峰寫法享幽，如下：

style.getAttribute("backgroundColor");

如果不考慮IE6瀏覽器铲掐，貌似也是可以這么寫：

style.getAttribute("background-color");

完整測試一下吧

CSS代碼：
.button {
    height: 2em;
    border: 0;
    border-radius: .2em;
    background-color: #34538b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
HTML代碼：
<input type="button" id="button" class="button" value="點擊我，顯示背景色" />
JS代碼：
var oButton = document.getElementById("button");

if (oButton) {
    oButton.onclick = function() {
        var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, null);
        if (oStyle.getPropertyValue) {
            alert("getPropertyValue下背景色：" + oStyle.getPropertyValue("background-color"));
        } else {
            alert("getAttribute下背景色：" + oStyle.getAttribute("backgroundColor"));
        }
    };
}

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方法可以先不聞不問。

這里節(jié)選了張鑫旭的文章內(nèi)容晤硕，點擊這里查看原版