JavaScript 中获取元素样式

在网页中设置某元素的样式，可以有以下几种方式：

通过外部的 CSS 样式表	<!-- some.html --> <link rel="stylesheet" type="text/css" href="some.css"> /* some.css */ #someid {background-color: blue;}
通过内嵌的 CSS 样式表	<!-- some.html --> <style> #someid {background-color: blue;} </style>
通过元素的 style 属性	<!-- some.html --> <div id="someid" style="background-color: blue;"></div>
通过 DOM2 提供的 API	/* some.js */ var elem = document.getElementById("someid"); elem.style.backgroundColor = "blue";

其中前面三种是在网页文件中静态地设置元素样式，而最后一种方式是通过 JavaScript 动态地改变元素的样式。

在 JavaScript 中，元素的 style 属性只保存前面后两种方式设置的样式。因此，如果我们需要读取该元素的实际样式，不能用这个属性。这时需要使用 getComputedStyle 函数。例子如下：

var elem = document.getElementById("someid");
alert(window.getComputedStyle(elem, null).backgroundColor);

其中在 getComputedStyle 函数的第二个参数可以指明元素的伪类。这个参数在旧版本 Firefox 中不可省略。

这个 getComputedStyle 函数在 IE6 - IE8 中没有，此时我们可以改用 IE 提供的 currentStyle 属性。例如：

var elem = document.getElementById("someid");
alert(elem.currentStyle.backgroundColor);

注意 getComputedStyle 得到的样式和 currentStyle 一样都是只读的。

为了方便使用，我们可以模拟 jQuery 写一个 css() 函数。如下：

$.fn.css = function(property, value) {
if (arguments.length >= 2) {
this.each(function() {
this.style[property] = value;
});
return this;
} else {
var style = window.getComputedStyle ? window.getComputedStyle(this[0], null) : this[0].currentStyle;
return style[property];
}
}　

参考资料：
[1] window.getComputedStyle - Document Object Model (DOM) | MDN
[2] Can I use getComputedStyle
[3] JavaScript - Get Styles - quirksmode
[4] getComputedStyle - ie test drive
[5] currentStyle object (Internet Explorer)
[6] 获取元素CSS值之getComputedStyle方法熟悉
[7] $.fn.css() | jQuery API Documentation