window.getComputedStyle方法简介

马黑黑

getCumputedStyle 基于 window 全局对象，是现代浏览器提供的标准API，用于获取元素 最终渲染的计算样式值（resolved value），包含所有CSS来源的最终结果，数据只读、实时更新。

🔷 关于 resolved value

CSS属性的解析值是返回 getComputedStyle() 的值。对于大多数属性，它是计算的值，但对于一些遗留属性（包括width和height），则是使用的值。有关更多每个属性的详细信息，请查阅相关资料。

🔷 语法

window.getComputedStyle(元素[,伪元素])

// 可以省略 window 关键字
getComputedStyle(元素[,伪元素])

所需参数两个：第一个 必须，指向要获取最终CSS样式结果的元素，例如id或其它声明过的标识；第二个 可选 ，缺省或值为 null时表示获取元素的CSS样式数据，若指定伪元素， '::before' 或 '::after'，表示获取元素对应伪元素的CSS样式数据。举例如下：

<style>
    .divBox { margin: 30px auto; width: 600px; height: 360px; background: beige; position: relative; }
    .divBox::before { position: absolute; content: '我是 ::before 伪元素'; top: -30px; }
</style>

<div id="div1" class="divBox" style="width: 700px;">

<script>
    // 获取元素的CSS样式
    const s1 = window.getComputedStyle(div1, null);
	console.log(s1.left); // → 0px
	console.log(s1.top); // → 0px
	console.log(s1.width); // → 700px
	console.log(s1.backgroundColor); // → rgb(245, 245, 220);
	console.log(s1.backgroundImage); // → none
	// 获取伪元素的CSS样式
    const s2 = window.getComputedStyle(div1, '::before');
    console.log(s2.content); // → 我是 ::before 伪元素
    console.log(s2.top); // → -30px;
</script>

上面，使用变量 s1、s2 分别存储元素和元素::before伪元素的CSS计算样式数据（集合），变量类型为JS对象，变量值为一系列的CSS属性键值对数据。读取其CSS指定属性值时使用链式符号 . 加CSS属性名称，名称若有短连接线 - 则采用驼峰书写方式改写（例如 backgroundImage）。

除了链式读取元素/伪元素的CSS属性值，还有另外两种方式可以使用：

console.log(s1['margin-top']); // → 30px
console.log(s1.getPropertyValue('position')); // → relative

🔷 重点： getComputedStyle 拿到的数据集合基于元素最后渲染的样式效果。例如上述示例，id="div1" 的元素使用类选择器 .class 的基本样式进行渲染，但div标签里又使用了内联 style 进行特定样式的重设（width设为700px，CSS类选择器设为600px），最终得到的结果是700px，因为行内 style 样式层级高于一般CSS样式。同样，如果通过其它方式改变元素的某个CSS属性值，然后再使用 getComputedStyle 方法去获取它，得到的值总是最后实际渲染的值。

🔷 提示：getComputedStyle 方法获取的是元素全部的CSS计算样式，所以，拿到的属性值会带相应的单位，例如 px、deg、s 等，颜色值通常会转换为 rgb 格式，数据若参与计算需要额外进行处理。

红影

这个可以获取获取元素或伪元素的CSS样式，只是不知道获取后派什么用处呢？

红影

const s1 = window.getComputedStyle(div1, null);
这里的div1没看懂，看css文件的名称是divBox啊。

马黑黑

红影 发表于 2026-3-1 13:34
const s1 = window.getComputedStyle(div1, null);
这里的div1没看懂，看css文件的名称是divBox啊。

你的问题说明你到现在还没有真正搞懂 CSS、HTML、JS 的关系。

CSS 负责提供样式，让 HTML 元素去使用。例中的 .divBox 选择器提供了一种叫做类选择器的样式表，这种选择器的样式，HTML标签通过 class=“divBox" 应用其制定的各类样式（比如宽高、位置、文本大小、背景色和图片、前景色等等）。

HTML标签是Web舞台上的演员，一个标签（例如div）就是一个要在 Web 页面上渲染（呈现）的演员，其发型、脸妆、服装很多都是 CSS 提供的。每个演员理论上可以有自己的 id（但也可以没有）、有的话就通过 id 读取它。

谁通过 id 读取 HTML 元素（标签）的 id、读来干嘛？JS，JS 可以在演员表演过程中控制、操纵演员的表演，甚至给演员无缝换装、换妆、换人……。JS 通过元素操作标识符（例如 id）识别元素这个演员，然后可以直接对之进行各种操作。

例中的 div 标签，使用了 class="divBox" 属性，表示应用 CSS 中指定的 .divBox {} 选择器的样式定制，该 div 还有一个 id，id="div1"，div1 是 div 标签的标识符，在同一个 Web 页必须是唯一的，所以JS可以直接通过它去操纵这个 div；如果没有这个 id，那就要通过其它方式给它一个标识符，例如 let div1 = document.querySelector('.divBox')，这将给第一个使用 class="divBox" 的标签打上标识符 div1，和操作 id 标识符一样直接可以操纵该 div 了。

马黑黑

红影 发表于 2026-3-1 13:31
这个可以获取获取元素或伪元素的CSS样式，只是不知道获取后派什么用处呢？

用处大了去。当然，不深度玩Web也用不上，可以不用理睬，路过就好。

举个通俗点的例子：假设你是室内装修设计师，你在做设计的时候是否需要知道空间的细节状况？能不能什么都不知道就可以给人家定制装修方案？

这个 getComputedStyle 就是用来收集元素的各种数据，这些数据将为其后续的动态渲染提供依据。帖子自适应居中功能就需要得到这类数据：元素当下 left 值和其宽度是多少就是非常有用的数据，它们是判断和计算元素在视口水平方向居中的重要依据。还有，利用伪元素模拟 placeholder 属性时需要知晓当下元素指定伪元素的 content 内容值，getComputedStyle 方法能够派上用场。

也曾年轻

红影 发表于 2026-3-1 13:34
const s1 = window.getComputedStyle(div1, null);
这里的div1没看懂，看css文件的名称是divBox啊。

那div 的 id 是 div1，id 唯一标识一个元素， 而 class 标识同 一类元素。

霜染枫丹

马老师晚上好！看不懂不影响我键盘支持，祝您新春快乐

马黑黑

霜染枫丹 发表于 2026-3-1 21:27
马老师晚上好！看不懂不影响我键盘支持，祝您新春快乐

有很多会看不懂的，这没关系

马黑黑

也曾年轻 发表于 2026-3-1 20:40
那div 的 id 是 div1，id 唯一标识一个元素， 而 class 标识同 一类元素。

这里面其实有个假设：如果标签没有id但知道它的 class 属性，拿到的是第一个使用该 class 的元素。如果有 id，也不冲突，div1 指向同一个元素。

也曾年轻

马黑黑 发表于 2026-3-1 21:52
这里面其实有个假设：如果标签没有id但知道它的 class 属性，拿到的是第一个使用该 class 的元素。如果有 ...

用 divBox 代入看能不能得到什么结果

马黑黑

也曾年轻 发表于 2026-3-1 22:29
用 divBox 代入看能不能得到什么结果

通过 class 查询元素，可以使用 document.querySelector('.class名称'); 实现，这需要声明。以下代码在一楼提供的代码基础上去掉待操作元素的 id，然后通过 class 属性获取第一个 class="divBox" 的元素标识符并进行一系列相同的获取CSS属性值的操作：

1. <style>
   
2.     .divBox { margin: 30px auto; width: 600px; height: 360px; background: beige; position: relative; }
   
3.     .divBox::before { position: absolute; content: '我是 ::before 伪元素'; top: -30px; }
   
4. </style>
   
5. 
   
6. <div class="divBox" style="width: 700px;">
   
7. 
   
8. <script>
   
9.     // 获取元素的CSS样式
   
10.     const divBox = document.querySelector('.divBOx');
    
11.     const s1 = window.getComputedStyle(divBox, null);
    
12.         console.log(s1.left); // → 0px
    
13.         console.log(s1.top); // → 0px
    
14.         console.log(s1.width); // → 700px
    
15.         console.log(s1.backgroundColor); // → rgb(245, 245, 220);
    
16.         console.log(s1.backgroundImage); // → none
    
17.         // 获取伪元素的CSS样式
    
18.     const s2 = window.getComputedStyle(divBox, '::before');
    
19.     console.log(s2.content); // → 我是 ::before 伪元素
    
20.     console.log(s2.top); // → -30px;
    
21. </script>

复制代码

核心在于读取元素，class名称必须带点好前缀。

也曾年轻

马黑黑 发表于 2026-3-1 23:34
通过 class 查询元素，可以使用 document.querySelector('.class名称'); 实现，这需要声明。以下代码在一 ...

别用 第10行啊， 这样更说明类名不能直接用

马黑黑

也曾年轻 发表于 2026-3-2 08:06
别用 第10行啊， 这样更说明类名不能直接用

额，你是说这个意思。

类名，标签名，都不能坐标标签标识符在JS中作为操作句柄使用，这是常识问题。

也曾年轻

马黑黑 发表于 2026-3-2 08:40
额，你是说这个意思。

类名，标签名，都不能坐标标签标识符在JS中作为操作句柄使用，这是常识问题。

我回红影帖就这意思， 她问为什么用 div1 而不用 divBox 。

马黑黑

也曾年轻 发表于 2026-3-2 08:54
我回红影帖就这意思， 她问为什么用 div1 而不用 divBox 。

酱紫！

挺好挺好，辛苦！