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....