所谓计算样式，就是嵌入式样式、外部样式表、内联样式综合的样式表现，那么如何来获取呢？
“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法，可以调用最终的样式。
这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例 如":after"）。如果不需要伪元素信息，第二个参数可以是null。
getComputedStyle()方法返回一 个CSSStyleDeclaration 对象（与style 属性的类型相同），其中包含当前元素的所有计算的样式。
以下面这个HTML 页面为例:
<!DOCTYPE html> <html> <head> <title>Computed Styles Example</title> <style type="text/css"> #myDiv { background-color: blue; width: 100px; height: 200px; } </style> </head> <body> <div id="myDiv" style="background-color: red; border: 1px solid black"></div> </body> </html>
js:
var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView.getComputedStyle(myDiv, null); alert(computedStyle.backgroundColor); // "red"，不是blue
后面就可以通过 computedStyle 来访问最终的样式了！
但是，边框属性可能 会也可能不会返回样式表中实际的border 规则（Opera 会返回，但其他浏览器不会）。存在这个差别的原因是不同浏览器解释综合（rollup）属性（如border）的方式不同，因为设置这种属性实际上会涉及 很多其他属性。在设置 border 时， 实际上是设置了四个边的边框宽度、颜色、样式属性（ border-left-width 、border-top-color 、border-bottom-style ，等等）。因此， 即使 computedStyle.border 不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth 会返回值！
但是！IE9之前版本不支持 getComputedStyle() 方法;
在IE 中，每个具有style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例，包含当前元素全 部计算后
的样式。取得这些样式的方式也差不多，如下面的例子所示。
var myDiv = document.getElementById("myDiv"); var computedStyle = myDiv.currentStyle; alert(computedStyle.backgroundColor); //"red"
所以兼容下IE9之前版本，代码就是这个样子：
var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle; alert(computedStyle.backgroundColor); // "red"，不是blue
当然除了这个方法，js高程里还有另外一个方法，去获取样式表的内容，然后一个个去调用样式表，去改，但是我觉得太麻烦了，要学的去翻书哦~
参考资料：