在前端开发中，获取元素的计算样式（computed style）是非常常见的需求。计算样式指的是浏览器对元素最终呈现出来的样式，它包含了所有CSS属性的值，包括从CSS文件和行内样式表继承而来的属性值以及浏览器自动计算的属性值等。
通过 JavaScript 获取计算样式
在JavaScript中，可以使用window.getComputedStyle()方法来获取计算样式。该方法接受两个参数：要获取样式的元素和一个可选的伪元素字符串。如果不需要获取伪元素的样式，则第二个参数可以传递null或空字符串。以下是基本语法：
const element = document.getElementById('my-element');
const computedStyle = window.getComputedStyle(element);此时，computedStyle将包含element的所有计算样式。你可以通过其属性名来访问对应的属性值。例如，访问element的背景颜色：
const backgroundColor = computedStyle.backgroundColor; console.log(backgroundColor);
需要注意的是，getComputedStyle()方法返回的是只读对象，不能直接修改其属性值。
示例代码
下面是一个完整的示例，展示如何获取元素的计算样式，并将其中一个属性值设置为新值：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
-------
----------- -
------ ------
------- ------
----------------- -------
------- --- ----- ------
-
--------
-------
------
---- -------------------------------
--------
----- ------- - --------------------------------------
----- ------------- - ---------------------------------
-------------------------------------------
-- ---------
----------------------------- - ------
---------
-------
-------在上面的代码中，我们获取了#my-element元素的计算样式，并将其背景颜色输出到控制台。然后，我们将该元素的背景颜色设置为红色。如果你运行这个示例，可以看到原来黄色的背景色变成了红色。
总结
获取元素的计算样式在前端开发中是经常用到的操作。使用JavaScript中的getComputedStyle()方法可以方便地获取元素的所有计算样式，并通过属性名来访问对应的属性值。请注意，计算样式是只读对象，不能直接修改其中的属性值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31245