原生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
 
各自使用方法在上面代码红色粗体中展示了。

 

 

posted @ 2015-10-30 10:56  方晓丹  阅读(523)  评论(0)  编辑  收藏  举报