Chrome(12)中使用getComputedStyle获取透明度(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中如下

Chrome(12)中使用getComputedStyle获取透明度(opacity)返回字符串不同于其它浏览器

Chrome(12)中使用getComputedStyle获取透明度(opacity)返回字符串不同于其它浏览器

而  IE9/Firefox/Safari/Opera 弹出的分别是0.1,0.2。Chrome返回的字符串长度是19,其它浏览器都是3。

jQuery的css方法也存在这个问题。 注意!

你可能感兴趣的:(opacity)