关于最终样式,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" οnclick="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" οnclick="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>