关于CSS设置和获取元素不透明度的问题与解决方案

对于浏览器对元素不透明度度opacity的支持情况和如何设置,相信大家已经都熟悉了。这里就不再分析。

简单的,要支持主流浏览器需要同时设置IE特有的滤镜和W3C标准的opacity属性。

例如:设置不透明度为20%

    filter:alpha(opacity=20);

    opacity:0.2;

我需要重点分享的是CSS不透明度通过JS获取的问题。

首先,经过本人的大量有效分析测试得出:

    IE5 - IE8   只支持filter滤镜设置CSS不透明度,不支持opacity属性设置CSS不透明度

    IE9           既支持filter滤镜设置CSS不透明度,也支持opacity属性设置CSS不透明度

    IE10+       不支持filter滤镜设置CSS不透明度,只支持opacity属性设置CSS不透明度

    Firefox Chrome Safari Opera 不支持filter滤镜设置CSS不透明度,只支持opacity属性设置CSS不透明度

 

    IE9+ 支持currentStyle,也支持document.defaultView.getComputedStyle


    IE5 - IE8 支持currentStyle,不支持document.defaultView.getComputedStyle


    非IE 不支持currentStyle,只支持document.defaultView.getComputedStyle

 

    IE 支持获取CSS用户自定义的属性,但是只能通过访问currentStyle返回,而访问document.defaultView.getComputedStyle无法获得自定义属性

    非IE 不支持获取CSS自定义属性

 

所以,用JS获取不透明度属性的时候,因为默认的opacity属性值为1,但是IE8及其以下的版本不支持,所以会返回undefined,而其他支持该属性的浏览器返回1。

那么在如上面的例子中那样设置了不透明度为20%不透明,那么我们要通过IE支持的currentStyle来获取filter的值:alpha(opacity=20),在通过正则表达式得到数值20,再乘以0.01得到正确的值0.2,

对于非IE和支持opacity的浏览器,可以直接获取。

 

但是

这里有一个需要注意的地方就是,返回值的浮点数与设置值不相等的问题。

在Chrome Safari Opera这3大浏览器中,设置opacity:0.2,当我们用JS获取opacity值得时候返回的却不是0.2,而是一个约等于0.2的很长的浮点数,浏览器测试这时判断返回值是否等于0.2,得到false。

对于这个问题我没有找到原因,但是在这3大浏览器中测试确实存在,返回值与设置值有微量误差,本人猜测这也许与获取CSS的方式是通过计算后的样式,其中浏览器内部的浮点数运算存在误差的缘故。

所以可以用 0.01*Math.round(100*CSS.opacity) 方法处理返回值来得到正确的值。

在IE和Firefox中没有这样的问题,他们都返回设置的值。

 

以上就是本人的一点小小的经验,非常高兴和大家分享!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。