很多时候，在用js操作页面元素时，需要获取元素的CSS样式值，但是可能我们事先并没有给它设定样式，这种情况下就有点尴尬了。
不过既然有这方面需求，那么浏览器就会有提供这类方法，给予开发者调用。
window.getComputedStyle
就如方法名称所表达的意思一样，即获得浏览器最终渲染计算后所得的最终样式值，当然不同浏览器所体现的效果可能有细微差别。
语法
var style = window.getComputedStyle(element[, pseudoElt]);
element
要获取样式的元素。
pseudoEle
用于匹配伪元素的字符串。某些浏览器下是可选的，必要时传递null即可。
返回值
返回一个CSSStyleDeclaration对象。
使用实例 引自getComputedStyle
<style>
h3:after {
content: ' rocks!';
}
</style>
<h3>generated content</h3>
<script>
var h3 = document.querySelector('h3'),
result = getComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns ' rocks!'
</script>
PS：CSS属性值涉及到三种类型的值，按顺序分别是：指定值(Specified value)、计算值(Computed value、应用值(Used value)。而这里的getComputedStyle获取的是最终的应用值。另外根据某文档显示，似乎还有第四种值，实际值(Actual value)，不过一般情况下这个跟应用值是一样的。
PPS：Firefox还支持一个window.getDefaultComputedStyle方法，用于获取浏览器忽略指定值的计算值（即浏览器默认样式值），参数同window.getComputedStyle。
element.currentStyle
虽然有window.getComputedStyle方法，但是在IE下面还是力不从心…… 没错，IE9以下并不支持，不过早先IE有在元素上实现一个currentStyle方法，可获得元素当前的样式，但这并不是Used value，据我推测顶多到Specified value，即如果没有指定css样式(Specified value)，则获得的是浏览器默认样式值。区别如下(差别还是挺大的)：
<style>
body {
height: 100%;
}
#body {
position: absolute;
}
</style>
<body style="with:auto;">
This is the <a id="body">body</a>.
</body>
<script>
var body = document.getElementById('body');
//通过style获取样式 in IE8、Chrome、Firefox
document.body.style.width; //"auto"
document.body.style.height; //""
body.style.display; //""
body.style.position; //""
// in IE8
document.body.currentStyle.height; //"100%"
document.body.currentStyle.width; //"auto"
body.currentStyle.display; //"inline"
body.currentStyle.position; //"absolute"
// in Chrome or Firefox
window.getComputedStyle(document.body).width; //"1298px"
window.getComputedStyle(document.body).height; //"324px"
window.getComputedStyle(body).display; // "block"
window.getComputedStyle(body).position; // "absolute"
</script>
上面代码可以说明几点：
- 通过元素的
style属性能获取到的是行内样式，因此通过该方式设置的样式也是位于行内样式上的。 - IE的
currentStyle方法获取的应该是指定值。因为id为body的a标签的position属性已经absolute了，而获取到的display还是inline，说明未计算，计算值与指定值的区别应该就在此了。 - 上面的代码看上去怪怪的，说明我写得容易让人误解，所以看仔细点啊…… (-_-)
另外在Microsoft的Internet Explorer Test Drive上有关于currentStyle和getComputedStyle的测试对比，当然前提是用IE9以上版本(我不确定IE9是否支持哈~)才能看到对比效果哦。
参考资料
- getComputedStyle
- Specified value
- Computed value
- 应用值
- cascade
- CSSStyleDeclaration
- getComputedStyle method
- Test IE getComputedStyle and currentStyle