当前位置: 代码迷 >> Web前端 >> Chrome(12+)中获取透明度(opacity)回到字符串不同于其它浏览器
  详细解决方案

Chrome(12+)中获取透明度(opacity)回到字符串不同于其它浏览器

热度:514   发布时间:2012-11-23 22:54:33.0
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方法也存在这个问题。 注意!

  相关解决方案