关于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中没有这样的问题，他们都返回设置的值。
以上就是本人的一点小小的经验，非常高兴和大家分享！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
