getComputedStyle() 是一个用于获取元素所有计算样式的函数。它的参数是要获取样式信息的元素，返回一个 CSSStyleDeclaration 对象，包含计算出的样式属性的键值对。

JS知识点总结之getComputedStyle的用法

介绍

getComputedStyle() 是一个用于获取元素所有计算样式的函数。它的参数是要获取样式信息的元素，返回一个 CSSStyleDeclaration 对象，包含计算出的样式属性的键值对。

语法

getComputedStyle(element, [pseudoElement])

element：要获取样式属性的元素。
pseudoElement（可选）：伪元素名称。

返回值

CSSStyleDeclaration 对象，包含元素计算出的样式属性。

示例

1. 获取元素颜色属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>字体颜色为红色</p>
    <script>
        const pTag = document.querySelector('p');
        const color = getComputedStyle(pTag).getPropertyValue('color');
        console.log(color);
    </script>
</body>
</html>

上面的代码使用了 getComputedStyle() 函数来获取 p 标签的颜色属性，并将结果存储到 color 变量中。最后将 color 输出到控制台中，可以看到输出结果为 red，即获取到了 p 标签的计算出的颜色属性。

2. 点击按钮获取元素宽度与高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="getSize()">获取元素宽度与高度</button>
    <script>
        function getSize() {
            const box = document.querySelector('#box');
            const width = parseInt(getComputedStyle(box).width);
            const height = parseInt(getComputedStyle(box).height);
            alert(`元素宽度为：${width}px，元素高度为：${height}px`);
        }
    </script>
</body>
</html>

上面的代码包含一个按钮和一个 div 元素，当点击按钮时会弹出一个提示框，显示 div 元素的宽度和高度信息。使用了 getComputedStyle() 函数获取元素的计算样式，并使用 parseInt() 函数将宽度和高度解析为数字类型。最后将结果显示在提示框中。