原生JavaScript获取css样式

Posted 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JavaScript获取css样式相关的知识，希望对你有一定的参考价值。

 

访问属性：obj.attr 或者 obj[‘attr‘]

通过js访问style属性 :

document.getElementById("main").style.backgroundColor;

 

 

 style 只能获取元素的内联样式。因此，要获取元素的完整的样式信息，必须使用 window 对象的 getComputedStyle 方法，此方法有2个参数，第一个参数为要获取计算样式的元素，第二个参数可以是null、空字符串、伪类(如:before,:after)，这两个参数 都是必需的。

完整实例：

 

<!doctype html>
<html>
<head>
    <style>
      
        #mask {
            position: absolute;
            z-index: 1000;
            top: 10px; left: 0;
            background: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
 
<div id="mask" style="border: dashed"></div>
<script>
    var mask = document.getElementById(‘mask‘);
    var style = window.getComputedStyle(mask, "");
    console.log(‘34‘,style.position,mask.style.border);

</script>
</body>
</html>

 

以上是关于原生JavaScript获取css样式的主要内容，如果未能解决你的问题，请参考以下文章

使用原生javascript如何读写css样式？

原生javascript 获得css样式有几种方法？

原生JS获取及设置CSS样式-1.行内样式

原生JS获取HTML样式并修改

用JavaScript修改CSS属性的代码

原生JavaScript(JS)修改添加CSS样式表 （更好的性能）