JavaScript getComputedStyle(): 获取元素的计算样式

摘要: 本教程将教你如何使用 JavaScript 的 getComputedStyle() 方法获取元素的计算 CSS 属性。

JavaScript getComputedStyle() 方法简介

getComputedStyle() 是 window 对象的方法，它返回一个包含元素计算样式的对象。

let style = window.getComputedStyle(element [,pseudoElement]);Code language: JavaScript (javascript)

getComputedStyle() 方法接受两个参数。

element 是你要返回其计算样式的元素。如果你传递其他节点类型，例如文本节点，则该方法将抛出错误。
pseudoElement 指定要匹配的伪元素。它默认为 null。

例如，如果你想获取带悬停状态的链接的所有 CSS 属性的计算值，可以将以下参数传递给 getComputedStyle() 方法。

let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);Code language: JavaScript (javascript)

请注意，window 是全局对象，因此在调用 getComputedStyle() 方法时可以省略它。

getComputedStyle() 方法返回一个实时样式对象，它是 CSSStyleDeclaration 对象的实例。这意味着当元素的样式发生改变时，计算样式会自动更新。

JavaScript getComputedStyle() 示例

让我们看一些使用 getComputedStyle() 方法的示例。

1) 简单 getComputedStyle() 方法示例

请看下面的示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS getComputedStyle() Demo</title>
    <style type="text/css">
        .message {
            background-color: #fff3d4;
            border: solid 1px #f6b73c;
            padding: 20px;
            color: black;
        }
    </style>
</head>
<body>

    <p class="message" style="color:red">
        This is a JS getComputedStyle() Demo!
    </p>

    <script>
        let message = document.querySelector('.message');
        let style = getComputedStyle(message);

        console.log('color:', style.color);
        console.log('background color:', style.backgroundColor);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

输出

color: rgb(255, 0, 0)
background color: rgb(255, 243, 212)

注意，我们将所有的 CSS 和 JavaScript 与 HTML 混合在一起，用于演示目的。在实践中，你应该将它们分离到不同的文件中。

工作原理

首先，在 HTML 文件的 head 部分定义 message 类的 CSS 规则。文本颜色为黑色。
其次，声明一个段落元素，其文本颜色为红色，如内联样式中定义的那样。此规则将覆盖在 head 部分定义的规则。
第三，使用 getComputedStyle() 方法获取段落元素的所有计算样式。color 属性为 red，如控制台窗口（rgb(255, 0, 0)）中所示，符合预期。

2) 用于伪元素的 getComputedStyle() 方法示例

以下示例使用 getComputedStyle() 方法从伪元素中提取样式信息。

<html>
<head>
    <title>JavaScript getComputedStyle() Demo</title>
    <style>
        body {
            font: arial, sans-serif;
            font-size: 1em;
            line-height: 1.6;
        }

        p::first-letter {
            font-size: 1.5em;
            font-weight: normal
        }
    </style>
</head>
<body>
    <p id='main'>JavaScript getComputedStyle() Demo for pseudo-elements</p>
    <script>
        let p = document.getElementById('main');
        let style = getComputedStyle(p, '::first-letter');
        console.log(style.fontSize);
    </script>
</body>
</html>Code language: HTML, XML (xml)

输出

24px

工作原理

首先，在 HTML 文件的 head 部分定义任何段落元素首字母的 CSS 规则。
然后，使用 getComputedStyle() 方法提取带有 id 的段落首字母的计算样式。段落首字母的字体大小为 24px。

总结

getComputedStyle() 是 window 对象的方法。
getComputedStyle() 方法返回一个包含元素计算样式的对象。

测验

本教程是否有帮助？