js获取元素样式之getComputedStyle方法

习惯了jquery的同学应该都知道获取元素样式的方式可以直接写成(obj).css(style);更方便的获取高度宽度等一些样式可以直接使用(obj).height()和$(obj).width()。很多时候就抛弃了js原生的获取样式方法了，因为js原生的方法很麻烦，但是想对js进一步的学习还是需要进行了解的，否则去看一些大神写的代码的时候就会发现很多都看不懂。

一、 getComputedStyle是什么

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

为什么要用这个属性呢，是因为通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了。

使用方法如下

var style = window.getComputedStyle("元素", "伪类");

例如

var dom = document.getElementById("test"),
    style = window.getComputedStyle(dom , ":after");

就两个参数，大家都懂中文的，没什么好说的。只是额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。

二、getComputedStyle与style的区别

这个问题在上面也说过了，通过style的方式可以获取样式，但是引用的外部样式表获取不到，但是他可以设置属性，换句话说他是一个可读可写的属性。

但是getComputedStyle属性是只读的属性，只能读属性，不能设置，但是他可以获取到元素的最终样式信息。

三、getComputedStyle与defaultView

如果我们查看jQuery源代码，会发现，其css()方法实现不是使用的window.getComputedStyle而是document.defaultView.getComputedStyle，实际上，使用defaultView基本上是没有必要的，getComputedStyle本身就存在window对象之中。根据DennisHall的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用

不过有个特殊情况，在FireFox3.6上不使用defaultView方法就搞不定的

四、getComputedStyle的兼容性

说到兼容性就让人头疼，各种版本厂商的浏览器各种的兼容性bug，下面来看一下getComputedStyle的兼容性问题

对于pc设备

对于移动端设备

上面打问号的表示没有测试，是否兼容不知。如果您方便测试，欢迎将测试结果告知，这里将及时更新，并附上您的姓名，以谢您做的贡献。

我们先把注意力放在桌面设备上，可以看到，getComputedStyle方法IE6~8是不支持的，得，背了半天的媳妇，发现是孙悟空变的——郁闷了。不急，IE自有自己的一套东西。

五、getComputedStyle与currentStyle

currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。

因此，从作用上将，getComputedStyle方法与currentStyle属性走的很近，形式上则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。

例如，我们要获取一个元素的高度，可以类似下面的代码：

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

结果FireFox下显示24px(经过计算了), 而IE浏览器下则是CSS中的2em属性值：

所以通用的方法可以使用下面的代码

return window.getComputedStyle ? window.getComputedStyle(obj,null).style: obj.currentStyle.style; //style代表向要查询的样式名，obj为索要查询的元素