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啊。