js獲取css屬性知多少？客官來擼就知曉！

 座右銘鎮樓：

        天下事，有所利有所貪者成其半，有所激有所逼者成其半

今天在讀掘金 前端工程師面試題的時候，忽然發現一個無比新奇的玩意兒：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....