使用getComputedStyle的浏览器兼容问题
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 501
获取计算后的元素样式,IE有currentStyle,而标准浏览器用getComputedStyle。IE9后也支持getComputedStyle了。发现以前写的css方法不好用了,在chrome

获取计算后的元素样式,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方法也存在这个问题。 注意!

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2