处理浏览器兼容为题之opacity

最新推荐文章于 2023-03-10 17:56:15 发布

csdncsdn9876

最新推荐文章于 2023-03-10 17:56:15 发布

阅读量343

点赞数

分类专栏：浏览器兼容性文章标签：浏览器兼容 opacity

本文链接：https://blog.csdn.net/csdncsdn9876/article/details/51960279

版权

浏览器兼容性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于 IE9及以下版本中设置元素透明度： element.style.filter = ‘alpha(opacity=值)’;
firefolk中设置元素的透明度：element.style.opacity = (0~1之间的值)；
不多说直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>处理ie与firefolk浏览器兼容问题</title>
        <style type="text/css">
            #test1{
                background-color: aquamarine;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="test1"></div>
        <script>
//          var test1 = document.getElementById("test1");
            /*IE9以下的不能识别opacity*/
            /*if(document.all){
                test1.style.filter = 'alpha(opacity=20)';
            }
            test1.style.opacity = 0.2;*/
            /*为了方便全局的调用，避免重复的代码，我们将设置透明度写成一个接口*/
            function setOpacity(node,level){
                node = typeof "string" ? document.getElementById(node) : node ;
                if(document.all){
                    node.style.filter = 'alpha(opacity=level)';
                }else{
                    node.style.opacity = level/100;
                }
            }
            /*调用*/
            setOpacity("test1",30);
        </script>
    </body>
</html>