JavaScript中的CSS样式编程------最终样式

本文通过示例对比了Internet Explorer (IE) 和 DOM 在获取元素最终样式的实现差异。在IE中使用currentStyle属性，在DOM中使用getComputedStyle方法，并展示了如何通过JavaScript获取指定div元素的背景颜色。

关于最终样式，IE和DOM在各自的实现上存在差异。

1.IE中的最终样式，代码如下：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function getBackgroundColor() { var oDiv = document.getElementById("div1"); alert(oDiv.currentStyle.backgroundColor); } </script> </head> <body> <div id="div1" class="special"></div> <input type="button" value="Get Background Color" onclick="getBackgroundColor()" /> <p>The alert displays nothing because the background color of the <code>div</code> is assigned by a class, not by the <code>style</code> attribute.</p> </body> </html>

2.DOM中的最终样式：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function getBackgroundColor() { var oDiv = document.getElementById("div1"); alert(document.defaultView.getComputedStyle(oDiv, null).backgroundColor); } </script> </head> <body> <div id="div1" class="special"></div> <input type="button" value="Get Background Color" onclick="getBackgroundColor()" /> <p>The alert displays nothing because the background color of the <code>div</code> is assigned by a class, not by the <code>style</code> attribute.</p> </body> </html>