关于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中没有这样的问题，他们都返回设置的值。

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