获取计算后的元素样式,IE有currentStyle,而标准浏览器用getComputedStyle。IE9后也支持getComputedStyle了。发现以前写的css方法不好用了,在chrome中返回的结果与其它浏览器不同。重现如下
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>css opacity</title> <style type="text/css"> div { background: gold; margin: 10px; } #d2 { opacity: 0.2; width : 250px; } </style> </HEAD> <BODY> <div id="d1" style="opacity:0.1;200px;">d1</div> <div id="d2">d2</div> <button onclick="test()">getOpacity</button> <script type="text/javascript"> var d1 = document.getElementById('d1'); var d2 = document.getElementById('d2'); function test() { var sty1 = window.getComputedStyle(d1, null), sty2 = window.getComputedStyle(d2, null); alert(sty1.opacity); alert(sty2.opacity); } </script> </BODY> </HTML>
两个div:d1和d2。样式分别写在 style属性和css 中,透明度分别是0.1,0.2。都通过 getComputedStyle 方式获取opacity。点击按钮,Chrome中如下
而 IE9/Firefox/Safari/Opera 弹出的分别是0.1,0.2。Chrome返回的字符串长度是19,其它浏览器都是3。
jQuery的css方法也存在这个问题。 注意!