座右铭镇楼：
天下事，有所利有所贪者成其半，有所激有所逼者成其半今天在读掘金 的时候，突然发现一个无比新奇的玩意儿：getComputedStyle，就是这位大佬。
当时楼主就虎躯一震，what's this?
本着程序员死磕到底的执着，楼主熟练的打开百度，输入getComputedStyle！
我了个去，竟然这么多搜索结果，看来已经是出来挺久的Api了，完蛋了，又落后了！
好在楼主眼前一亮，发现竟然有张鑫旭大大的博文也在将这个东西，果断戳进去一睹芳容。
，有需要的小伙伴可以去张大大的博客里瞅瞅，感谢大佬的指点迷津，本文也是在此基础之上更细化了一些。
假装有一条华丽的分割线：
少逼逼，不啰嗦，show you the code：
dom结构如下：
复制代码
css样式如下：
复制代码
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....