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

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

  • 相关阅读:
    为DataGrid 写一个 DropDownListColumn
    网页向女友告白和纪念日专用特效
    CentOS6.5 64位站点压力測试工具webbench
    RxJava系列之二 变换类操作符具体解释1
    C语言实现单链表节点的删除(带头结点)
    excel 补全全部空格
    Linux经常使用命令-文件搜索命令-文件搜索命令find
    错误代码: 1045 Access denied for user 'skyusers'@'%' (using password: YES)
    Yocto tips (17): Yocto License问题:restricted license not whitelisted in LICENSE_FLAGS_WHITELIST
    二叉树的基本使用
  • 原文地址:https://www.cnblogs.com/reent/p/3930186.html
Copyright © 2020-2023  润新知