zoukankan      html  css  js  c++  java
  • 原生js获取样式表:currentStyle与defaultView的区别 真实例子

    基础概念:currentStyle与defaultView均是用于获取css样式表内样式的js函数
     
    区别在有浏览器的兼容性不同。
     
    下面是测试代码:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
        <style type="text/css">
        .btn1{
            color:red;
        }
        </style>
    </head>
    
    <body>
        <button id="btn1" class="btn1">点我</button>
    
    </body>
    <script type="text/javascript">
         var getCSS = function(obj, v) {
            var _style = obj.style;
            if (_style[v]) return _style[v];
            if (obj.currentStyle) return obj.currentStyle[v];//兼容IE7-IE11;不兼容chrome、firefox、safari、opera
            if (document.defaultView && document.defaultView.getComputedStyle) {//兼容IE9-IE11、chrome、firefox、safari、opera;不兼容IE7-IE8
                v = v.replace(/([A-Z])/g, "-$1").toLowerCase(); //这里要把类似backgroundColor转为background-color,因为这里使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
                var s = document.defaultView.getComputedStyle(obj, "");
                return s && s.getPropertyValue(v);
            }
            return null;
        };
    
        alert(getCSS(document.getElementById("btn1"),"color"));
    
    
    </script>
    </html>
     
     
    总结:
    currentStyle:兼容IE7-IE11;不兼容chrome、firefox、safari、opera
    defaultView:兼容IE9-IE11、chrome、firefox、safari、opera;不兼容IE7-IE8
     
    各自使用方法在上面代码红色粗体中展示了。
  • 相关阅读:
    Visual C#使用DirectX实现视频播放
    windows WMIC命令大全
    WMI 无法监视时必须要尝试的手段 winmgmt /resyncperf
    DirectX技术实现视频会议中的音频通信
    c++引用
    c++模板详解
    四元数
    static_cast 和 dynamic_cast
    C++堆和栈详解(转)
    设计模式六大设计原则
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/4922689.html
Copyright © 2011-2022 走看看