虽然可以通过 style 来获取单一值的 CSS 样式，但对于复合值的样式信息，就需要通过计算样式来获取。
DOM2 级样式，window 对象下提供了 getComputedStyle()方法。接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有没有伪类，就填 null。
这种计算样式的获取，不仅仅可以获取到没有设置的默认样式，也可以获取行内，内联和链接（因为不管你在哪里设置CSS，最终会驻留在浏览器的计算样式里）
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box var style = window.getComputedStyle(box,null); alert(style); //[object CSS2Properties],表示计算后的css样式 alert(style.fontSize); //结果是计算后的样式，一般表示默认样式和设置后的样式，即如果设置了样式结果是设置后的样式，如果没有设置就是默认的样式 } </script> </head> <body> <div id="box" style="color:#F00; font-size:20px;">测试Div</div> </body>
IE 6,7,8不支持这个 DOM2 级的方法，但有个类似的属性可以使用 currentStyle 属性通过节点调用。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box var style = box.currentStyle; alert(style.color); } </script> </head> <body> <div id="box" style="color:#F00; font-size:20px;">测试Div</div> </body>
做兼容
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle; alert(style.color); //颜色在不同的浏览器会有 rgb()格式 alert(style.fontSize); alert(style.border); //不同浏览器不同的结果,这个属性被计算之后就不存在了,这个属性不兼容IE6,7,8 最好borderTopColor 这样每个获取 alert(style.fontFamily); //计算显示复合的样式值 alert(box.style.fontFamily); //空 } </script> </head> <body> <div id="box" style="color:#F00; font-size:20px;">测试Div</div> </body>