座右銘鎮樓：
天下事，有所利有所貪者成其半，有所激有所逼者成其半
今天在讀掘金前端工程師面試題的時候，突然發現一個無比新奇的玩意兒：getComputedStyle，就是這位大佬。
當時樓主就虎軀一震，what`s this?
本著程式設計師死磕到底的執著，樓主熟練的開啟百度，輸入getComputedStyle！
我了個去，竟然這麼多搜尋結果，看來已經是出來挺久的Api了，完蛋了，又落後了！
好在樓主眼前一亮，發現竟然有張鑫旭大大的博文也在將這個東西，果斷戳進去一睹芳容。
獲取元素css值之getComputedStyle方法熟悉，有需要的小夥伴可以去張大大的部落格裡瞅瞅，感謝大佬的指點迷津，本文也是在此基礎之上更細化了一些。
假裝有一條華麗的分割線：
少逼逼，不囉嗦，show you the code：
dom結構如下：
<div id="app" style="width: 200px;border: 1px solid blue;"></div>
複製程式碼css樣式如下：
<style type="text/css">
#app {
height: 100px;
background: red;
padding: 20px;
float: left;
margin: 30px;
}
</style>
複製程式碼js嘛，慢慢來，樓主會帶著大家仔細瞅瞅這個無比給力的getComputedStyle的用法，讓你在js中獲取css屬性不再是夢…..
// appDom: dom物件
var appDom = document.getElementById("app")
複製程式碼首先，我們們先來擼大家開發中最常用的element.style.balabal，為什麼說它常用呢？因為它實在太原生，太大眾了，廢話少說，柿子先撿軟的捏：
console.log(`appDom.style : `,appDom.style)
console.log(`appDom.style.width: `, appDom.style.width)
console.log(`appDom.style.height: `, appDom.style.height)
console.log(`appDom.style.border: `, appDom.style.border)
console.log(`appDom.style.length: `, appDom.style.length)
console.log(`appDom.style.float: `, appDom.style.float)
在chrome的控制檯裡，我們可以看到如下：
發現什麼了嗎？沒錯。恭喜聰明的你答對了，
element.style.***複製程式碼這樣的語法，只能獲取到我們在html中內聯的css樣式，而在style標籤中寫的樣式呢？它一個都拿不到。
OK，然後我們針對element.style.balala這樣的語法，再來看看萬惡的IE表現如何呢？
/* IE7 – IE8 */
原諒IE這犢子，它連console.log都不能帶顏色，如果你想在chrome裡玩轉console的話，可以看這邊文章。言歸正傳，可以發現，在IE7和IE8中，是支援element.style.***這樣的語法的，只是各位看官是否發現？它的border…..娘希匹…..心裡一萬頭*****呼嘯而過…….o(╯□╰)o….
/* >=IE9 */
在IE9+中，總算把那個反人類的border給修復了，而且各位看官請仔細與上圖對比，可以發現length屬性也有值了，這說明IE9的支援度更好了。
有的同學可能要說了，你這個low逼，這麼簡單的api，我tm三年前就會了…
好吧，樓主承認樓主的智商有待提高。那麼擼完最常用的element.style.balabala的各種情況之後，我們開始本文的主角，有請getComputedStyle閃亮登場。
“前排出售 啤酒飲料礦泉水 瓜子花生小板凳，維修各類航母，炮彈啦……”
先援引張鑫旭大大文章中的簡介：
getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式宣告物件([object CSSStyleDeclaration])，只讀。
getComputedStyle()gives the final used values of all the CSS properties of an element.
語法呢，在下面：
var style = window.getComputedStyle("元素", "偽類");複製程式碼樓主自己測試，如下幾種寫法都是可以得，show you the code:
window.getComputedStyle(app, null)
window.getComputedStyle(app, )
window.getComputedStyle(app, ``)
複製程式碼所以呢，如果沒有偽類的話，想怎麼寫，都隨便你咯。
那麼，chrome對它的支援如何呢？
上測試程式碼：
if (window.getComputedStyle) {
// 相容性判斷還是要有的，萬一王炸了呢？
var appStyleDel = window.getComputedStyle(app, null)
console.groupEnd()
console.log(`%c window.getComputedStyle(元素,偽類)呼叫`, `color: #fff; background: #40f;`);
console.group()
console.log(appStyleDel)
console.log(`appStyleDel.width: `, appStyleDel.width)
console.log(`appStyleDel.height: `, appStyleDel.height)
console.log(`appStyleDel.border: `, appStyleDel.border)
console.log(`appStyleDel.length: `, appStyleDel.length)
console.log(`appStyleDel.float: `, appStyleDel.float)
console.log(`appStyleDel.borderTopleftRadius: `, appStyleDel.borderTopLeftRadius)
}複製程式碼chorme控制檯顯示的效果如下：
那麼在IE下又是如何的呢？
/* >=IE9 */
可以看到，在IE下面，相容性還並不是很完美。只能說：”老闆，我們能不支援IE嗎？“
知道了getComputedStyle的用法，在張大大的博文中，還有介紹getPropertyValue這樣一個方法，我也同時進行了測試，程式碼如下：
if (appStyleDel.getPropertyValue) {
console.groupEnd()
console.log(`%c appStyleDel.getPropertyValue()呼叫`, `color: #fff; background: #89f;`);
console.group()
console.log(`appStyleDel.getPropertyValue(): `, appStyleDel.getPropertyValue)
console.log(`appStyleDel.getPropertyValue("width"): `, appStyleDel.getPropertyValue(`width`))
console.log(`appStyleDel.getPropertyValue("height"): `, appStyleDel.getPropertyValue(`height`))
console.log(`appStyleDel.getPropertyValue("border"): `, appStyleDel.getPropertyValue(`border`))
console.log(`appStyleDel.getPropertyValue("length"): `, appStyleDel.getPropertyValue(`length`))
console.log(`appStyleDel.getPropertyValue("float"): `, appStyleDel.getPropertyValue(`float`))
console.log(`appStyleDel.getPropertyValue("border-top-left-radius")`, appStyleDel.getPropertyValue(`border-top-left-radius`))
}複製程式碼chrome中顯示如下：
而在IE中嘛。呵呵…
對比chrome中的效果，IE的表現只能說差強人意，畢竟border屬性還是沒有顯示出來。
同時，在張大大的博文中，還有getAttribute方法，這個方法的語法是
element.getAttribute(``)複製程式碼我們可以測試一下：
if (appDom.getAttribute) {
console.groupEnd()
console.log(`%c appDom.getAttribute()呼叫`, `color: #fff; background: #700;`);
console.group()
console.log(`appDom.getAttribute: `, appDom.getAttribute)
console.log(`appDom.getAttribute("style"): `, appDom.getAttribute(`style`))
console.log(typeof appDom.getAttribute(`style`))
}複製程式碼那麼在chrome中表現如何呢？
IE中呢：
/* IE7 */
/* IE8 */
/* IE9 */
可以看到，IE各個版本中getAttribute的差別還是比較大的，所以在實際使用的時候，還是需要斟酌一番。
最後，我們看看IE獨有的currentStyle屬性
if (appDom.currentStyle) {
console.log(`appDom.currentStyle:` + appDom.currentStyle)
console.log(`appDom.currentStyle.width:` + appDom.currentStyle.width)
console.log(`appDom.currentStyle.height:` + appDom.currentStyle.height)
console.log(`appDom.currentStyle.border:` + appDom.currentStyle.border)
console.log(`appDom.currentStyle.length:` + appDom.currentStyle.length)
console.log(`appDom.currentStyle.float:` + appDom.currentStyle.float)
console.log(`appDom.currentStyle.borderTopleftRadius:` + appDom.currentStyle.borderTopleftRadius)
}複製程式碼效果如下：
結語：
看完了這麼多讓人眼花繚亂的API，大家是不是也和樓主一樣？
那麼在實際開發中，我們究竟該使用哪個方法來獲取呢？
如果是在chrome中使用的話，如果僅僅是獲取行內的樣式，那麼element.style.balabala的語法足夠使用了，當然，我們通常把樣式寫在style中，所以推薦大家使用getComputedStyle的語法，而且呢，在getComputedStyle返回的CSSStyleDeclaration物件中，我們不僅可以使用點語法來獲取相關的css屬性值，而且也可以使用CSSStyleDeclaration.getPropertyValue()的方式來進行獲取，需要注意的是，點語法獲取使用的是駝峰法，而getPropertyValue()中使用的是短橫線法，這點也是需要注意的。
而在IE中，從IE9開始，根據我們的測試，似乎使用IE自家的currentStyle語法相容性更好一些，對屬性的支援程式也更高，具體使用的時候，還是要針對IE，做一些相容的措施。
文章寫到這裡，今天的分享就算告一段落了。
下週會為大家分享getComputedStyle中偽類的用法，以及getComputedStyle和大名鼎鼎的getboundingclientrect()以及相關的一些令人眼花繚亂的各種clientWidth,clientHeight….，保證讓你看完之後，啥呢？
END….