js getComputedStyle用法

时间:2022-10-20 时雨.` 人气:0

getComputedStyle()这个方法来获取元素当前的样式

这个方法是window的方法，可以直接使用

需要两个参数

第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

1.可以通过 getComputedStyle(对象，null).样式名 的形式来读取样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如：没有设置width，它不会获取到auto，而是一个长度

2.为了更方便的使用可以加入正则表达式获取样式名

利用 getComputedStyle(样式元素，null)[样式名] 的形式来获取样式

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 100px;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            //获取box1元素节点对象
            var box1=document.getElementById("box1");
            //这里调用getComputedStyle来获取left的值
            var left=getComputedStyle(box1,null)["left"]; 
            alert("left的值是"+left);         
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

可以看到这里是获取box1元素的left属性，我们设置的属性是100px,

运行结果如下：

补充：getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的（只读与可写）。

1、正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。

2、获取的对象范围getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；

而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值

（如果有）就是190+，而element.style就是0。

总结

加载全部内容