JavaScript中getComputedStyle()方法的用法与区别详解

getComputedStyle() 方法基础用法

getComputedStyle() 是 JavaScript 中用于获取元素当前最终样式的方法。

该方法挂载在 window 对象上，可直接调用。

调用时需要传入两个参数。

• 第一个参数指定需要获取样式的 DOM 元素节点。
• 第二个参数通常用于指定伪元素（如 ::before 或 ::after），若无需获取伪元素样式，一般传入 null。

该方法执行后返回一个 CSSStyleDeclaration 对象，其中封装了当前元素所有计算后的样式属性。

可以通过 getComputedStyle(element, null).propertyName 的形式来读取具体的样式值。

如果某个样式未在代码中显式设置，该方法会返回浏览器计算后的真实值，而非 CSS 默认值（如 auto）。

例如，若未设置 width 属性，getComputedStyle 不会返回 "auto"，而是返回具体的像素长度值。

为了更便捷地访问样式名，可以结合正则表达式处理属性名。

推荐使用 getComputedStyle(element, null)[propertyName] 的方括号语法来获取样式，这样能更好地处理带连字符的 CSS 属性名（如 background-color）。

以下是一个具体的应用示例。

<!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>

代码中获取 id 为 box1 元素的 left 属性，该元素在 CSS 中设置的 left 值为 100px。

运行上述代码后的输出结果如下所示。

getComputedStyle 与 element.style 的区别

补充说明：getComputedStyle 与 element.style 的主要区别。

虽然可以通过 element.style 获取元素的 CSS 样式声明对象，但两者在功能上有显著差异，主要体现在只读与可写权限上。

首先，getComputedStyle 返回的对象是只读的，仅支持读取样式，不支持直接设置；而 element.style 既可读也可写，功能更灵活。

其次，获取的样式范围不同。getComputedStyle 返回的是最终应用在元素上的所有 CSS 属性集合，即使没有显式编写 CSS 代码，也会包含继承自父元素的默认样式。

相比之下，element.style 仅包含元素 inline style 属性中直接定义的 CSS 样式。

因此，对于一个没有任何内联样式的普通元素（如 <p>），getComputedStyle 返回的对象中可能包含 190 多个属性（length 属性值大于 190），而 element.style 的 length 则为 0。

总结

本文介绍了 JavaScript 中 getComputedStyle 的用法。如需了解更多相关 JS 知识，请查阅本站其他文章或继续浏览后续内容，感谢支持。