js中currentStyle和getComputedStyle获取css样式区别-CSDN博客

本文链接：https://blog.csdn.net/weixin_38481963/article/details/79381615

js中获取样式我了解到三种。一种是通过obj.offsetAttr来获取样式，通过这种方法来获取元素的宽高时，如果没有边框，可以正确获取，如果使用边框属性则会出现问题，为了解决这个问题，可以使用另一种方法，通过getComputedStyle属性来获取css样式（非行间）。还有一种是通style属性来获取css样式（行间）。

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        #clock {
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("clock");
            alert(getStyle(oDiv,"width"));
        }
        /*可以作为一段标准代码，理解并记忆（个人建议）*/
        function getStyle(obj,attr) {
            if(obj.currentStyle)
            {
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

接下来解释一下：

getComputedStyle用来获取css样式属性，只读。有人可能问了，既然有了这个，那为什么还用currentStyle，这当然要问IE（就它最特殊）了，这个是针对IE浏览器使用的。于是为了兼容主流浏览器，就可以将这两个封装成getStyle函数。这个主要是获取非行间样式，也就是像位于之间的css样式属性。

当然不要忘记了还有style属性。代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("clock");
            alert(oDiv.style.width);
        }
    </script>
</head>
<body>
    <div id="clock"  style="width:200px;height:200px;background-color:yellow "></div>


</body>
</html>

解释一下：

style只能获取行间样式，也就是style=”……”后面的属性。如果将style=”……”里面的内容设置成css样式也就是

#clock {
    width:200px;
    height:200px;
    background:yellow;
}

将获取不到任何内容。

style属性的最大作用是用来设置css属性而不是获取css属性，例如：

oDiv.style.width=400+'px';

设置该元素的宽度为400px。