上篇文章講到如何設置元素樣式，本文將繼續給大家分享如何獲取元素樣式。

一、style，只獲取標簽上定義的行內樣式

在這里講的style用法包括三個：style、style.cssText和style.getPropertyValue()，直接看個例子吧：

/*CSS*/
#box{ width: 200px; height: 200px; background-color: #0f0;}

<!--HTML-->
<div id="box" style="width: 100px; background-color: #f00;"></div>

//JavaScript
var box = document.getElementById("box");
console.log(box.style.cssText);  // "width: 100px; background-color: rgb(255, 0, 0);"
console.log(box.style.width);    // "100px"
console.log(box.style.height);    // ""
console.log(box.style.getPropertyValue('background-color'));  // "rgb(255, 0, 0)"

通過上面例子我們可以看出，通過這種方式只能獲取行內樣式，并不能獲取到CSS樣式表中的樣式。

二、cssRules，只獲取CSS樣式表中定義的樣式

接著上面的例子：

//JavaScript
var sheet = document.styleSheets[0];   // 獲取頁面中第一個樣式表
var rules = sheet.cssRules;   // 獲取頁面中第一個樣式表中定義的所有規則，rules[0]即代表第一條規則
console.log(rules[0].style.cssText);    // "width: 200px; height: 200px; background-color: rgb(0, 255, 0);"
console.log(rules[0].style.width);    // "200px"
console.log(rules[0].style.height);    // "200px"
console.log(rules[0].style.getPropertyValue('background-color'));    // "rgb(0, 255, 0)"

可以看出，用法其實與上面類似，只不過是主體變為rules[0]而不是box，所以只能獲取到樣式表中的樣式，而并不能獲取到行內樣式。

三、getComputedStyle()，獲取當前元素的計算樣式

以上兩種方式，都具有太強的針對性，不夠靈活，因為獲取到的樣式可能并不是當前元素最終表現出來的樣式。因此，如果想要獲取所有樣式表層疊而來的當前元素的樣式，我們就要用到getComputedStyle()方法。

依然繼續前面的例子：

console.log(getComputedStyle(box).cssText);    // 注意不僅僅只打印現有樣式簡單的疊加覆蓋結果，而是還會有很多其他樣式
console.log(getComputedStyle(box).width);    // "100px"
console.log(getComputedStyle(box).height);    // "200px"
console.log(getComputedStyle(box).getPropertyValue('background-color'));    // "rgb(255, 0, 0)"

很明顯，用法還是和style類似，但是通常情況下使用這種方式獲取到的樣式才是我們真正所需要的。

兼容性：在IE8下，getPropertyValue()、cssRules和getComputedStyle()統統都不兼容，可以分別使用style.[屬性名]、rules和currentStyle的方式替代，具體用法本文將不再說明，在此也希望其他開發者放棄兼容IE8及更早版本，如今2017都快接近尾聲，微軟自己都早已放棄，我們何必繼續再慣著那部分少量用戶而折磨自己呢？