zoukankan      html  css  js  c++  java
  • 关于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中没有这样的问题,他们都返回设置的值。

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

  • 相关阅读:
    JAVAWEB使用保存cookie、删除cookie、获取cookie工具类
    JAVA比较指定的两个日期
    编写一个C程序运行时输出 Hello World!
    正确理解以下名词及其含义:1源程序,目标程序,可执行程序2程序编辑,程序编译,程序连接3程序,程序模块,程序文件4函数,主函数,被调用函数,库函数5程序调试,程序测试
    为什么需要计算机语言?高级语言有哪些特点?
    什么是程序?什么是程序设计?
    题解 卡农
    题解 GT考试
    题解 SP6779 【GSS7
    题解 Crash 的文明世界
  • 原文地址:https://www.cnblogs.com/reent/p/3930186.html
Copyright © 2011-2022 走看看