虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。 “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>
应用给这个例子中<div>元素的样式一方面来自嵌入式样式表（<style>元素中的样式），另一方面来自其 style 特性。但是，style 特性中设置了 backgroundColor 和 border，没有设置 width和 height，后者是通过样式表规则应用的。以下代码可以取得这个元素计算后的样式。
- var myDiv = document.getElementById(“myDiv”);
- var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
- alert(computedStyle.backgroundColor); // “red”
- alert(computedStyle.width); // “100px”
- alert(computedStyle.height); // “200px”
- alert(computedStyle.border); // 在某些浏览器中是”1px solid black”
在这个元素计算后的样式中，背景颜色的值是”red”，宽度值是”100px”，高度值是”200px”。我们注意到，背景颜色不是”blue”，因为这个样式在自身的 style 特性中已经被覆盖了。边框属性可能会也可能不会返回样式表中实际的 border 规则（Opera会返回，但其他浏览器不会）。存在这个差别的原因是不同浏览器解释综合（rollup）属性（如 border）的方式不同，因为设置这种属性实际上会涉及很多其他属性。在设置 border 时，实际上是设置了四个边的边框宽度、颜色、样式属性（border-left-width、border-top-color、border-bottom-style，等等）。因此，即使computedStyle.border 不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth 会返回值。
IE不支持 getComputedStyle()方法，但它有一种类似的概念。在 IE中，每个具有 style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式。取得这些样式的方式也差不多，如下面的例子所示。
- var myDiv = document.getElementById(“myDiv”);
- var computedStyle = myDiv.currentStyle;
- alert(computedStyle.backgroundColor); //”red”
- alert(computedStyle.width); //”100px”
- alert(computedStyle.height); //”200px”
- alert(computedStyle.border); //undefined
与 DOM版本的方式一样，IE也没有返回 border 样式，因为这是一个综合属性。无论在哪个浏览器中，最重要的一条是要记住所有计算的样式都是只读的；不能修改计算后样式对象中的 CSS属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的 CSS属性都会表现在计算后的样式中。例如，所有浏览器中的 visibility 属性都有一个默认值，但这个值会因实现而异。在默认情况下，有的浏览器将 visibility 属性设置为”visible”，而有的浏览器则将其设置为”inherit”。换句话说，不能指望某个 CSS 属性的默认值在不同浏览器中是相同的。如果你需要元素具有某个特定的默认值，应该手工在样式表中指定该值。
摘抄自：《JavaScript高级程序设计》第315页