JavaScript 获取 CSS 伪元素样式的方法

JavaScript 获取 CSS 伪元素样式的方法

CSS 伪元素（pseudo-elements）功能强大，可用于绘制 CSS 三角形、构建提示框或完成其他无需额外 HTML 元素的简单任务。过去，JavaScript 无法直接读取伪元素的 CSS 属性，但现在有了新的方法可以实现这一功能。假设你的 CSS 代码如下：

.element:before {
content: 'NEW';
color: rgb(255, 0, 0);
}

若要获取 .element:before 中的样式属性，可以使用以下 JavaScript 代码：

var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color')

将伪元素选择器作为 window.getComputedStyle 方法的第二个参数，即可获取伪元素的样式属性。建议将此技巧纳入常用工具库，随着浏览器支持的完善，伪元素的应用价值将日益提升。