原生js获取样式表：currentStyle与defaultView的区别真实例子

最新推荐文章于 2023-03-13 08:45:46 发布

weixin_34375251

最新推荐文章于 2023-03-13 08:45:46 发布

阅读量148

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Rosefxd/p/4922689.html

版权

基础概念：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>