currentStyle和getComputedStyle的兼容写法

发表于   |   分类于   |  

今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="样式" id="btn">
    <div id="div"></div>
    <script>
        function css(obj, attr, value) {
            if (arguments.length === 2) {
                return obj.currentStyle[attr];
            } else if(arguments.length === 3){
               obj.style[attr] = value;
            }
        }
        window.onload = function (){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {
                css(oDiv, 'background', 'green');
                console.log(oDiv.currentStyle.width);
                // console.log(getComputedStyle(oDiv, false).width);
            }
        }
    </script>
</body>
</html>

然而当我用chrome浏览器测试的时候，浏览器却抛出了一个错误

Uncaught TypeError: Cannot read property ‘width’ of undefined

于是马上联想到这必定又是浏览器大战中留下来的兼容问题，于是小白开始上网搜索，总结如下：

currentStyle：获取计算后的样式，也叫当前样式、最终样式。
优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14则弹出“undefined”。

虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

以下是兼容写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="样式" id="btn">
    <div id="div"></div>
    <script>
        function css(obj, attr, value) {
            if (arguments.length === 2) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }

            } else if(arguments.length === 3){
                obj.style[attr] = value;
            }
        }
        window.onload = function (){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {
                css(oDiv, 'background', 'green');
                console.log(css(oDiv, 'width'));
                // console.log(getComputedStyle(oDiv, false).width);
            }
        }
    </script>
</body>
</html>

不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
        // 哪个元素
        // 哪个样式
        function getStyle(obj, attr) {
            var style;
            if (obj.currentStyle) {
                style = obj.currentStyle[attr];
            } else{
                style = getComputedStyle(obj, false)[attr];
            }
            return style;
        }
        window.onload = function (){
            var oDiv = document.getElementById("box");
            console.log(getStyle(oDiv, 'backgroundColor'));
        }

</script>