Chrome(12+)中获取透明度(opacity)返回字符串不同于其它浏览器
获取计算后的元素样式,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;width: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方法也存在这个问题。 注意!