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
     
    各自使用方法在上面代码红色粗体中展示了。
  • 相关阅读:
    poj 1840(五元三次方程组)
    Selenium(二)开发环境的搭建
    Selenium(一)自动化测试简介
    (二)AppScan使用教程
    (一)AppScan的安装及破解
    (一)python3.7的安装
    读完《大道至简》后的反思
    BZOJ3585: mex
    BZOJ3544: [ONTAK2010]Creative Accounting
    BZOJ3531: [Sdoi2014]旅行
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/4922689.html
Copyright © 2011-2022 走看看