JavaScript中BOM对象window怎么用getComputedStyle的伪元素参数获取CSS伪类样式-js教程-PHP中文网

getcomputedstyle 无法获取伪类（如 :hover）样式，因其仅作用于当前渲染状态；但可获取伪元素（::before/::after）样式，需传入第二个参数 ':before' 或 ':after'。

javascript中bom对象window怎么用getcomputedstyle的伪元素参数获取css伪类样式

getComputedStyle 不能直接获取伪类（如 :hover、:focus、:active）的样式，因为它只作用于**当前已渲染并处于特定状态的元素**，而伪类样式只有在用户交互（如悬停、点击）时才临时生效，JS 无法主动“触发”或“模拟”这些状态来读取其样式。

能用 getComputedStyle 获取的是伪元素样式（:before / :after）

注意区分：伪类（pseudo-classes）和伪元素（pseudo-elements）是两类不同概念：

伪类：描述元素的动态状态，如 :hover、:disabled、:nth-child(2) —— 无法通过 getComputedStyle 读取
伪元素：表示元素的抽象子部分，如 ::before、::after、::first-line —— 可以读取（需传入第二个参数）

正确获取 ::before / ::after 的样式

调用 window.getComputedStyle(element, pseudoElt)，第二个参数传入字符串 ':before' 或 ':after'（注意单冒号兼容写法，现代浏览器也支持双冒号但部分旧环境要求单冒号）：

const el = document.querySelector('.my-btn');
const beforeStyle = window.getComputedStyle(el, ':before');
console.log(beforeStyle.content); // '"▶"'
console.log(beforeStyle.color);   // 'red'

⚠️ 前提是该元素实际渲染了伪元素（即 CSS 中定义了 content，且未被 display: none 等隐藏）。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

为什么 hover 等伪类样式读不到？

因为 getComputedStyle 读取的是浏览器当前**真实渲染树中的计算值**。当鼠标没悬停时，:hover 规则根本不参与样式计算，自然没有对应值。JS 无法强制让元素进入 :hover 状态来测量。

变通方法（不推荐用于生产）：

临时给元素加一个 class 模拟 hover 效果（如 .my-btn.is-hovered），再用 getComputedStyle 读取该 class 下的样式
在 CSS 中预先定义好 hover 样式对应的 class，用 JS 切换 class 后测量（需注意重排/重绘时机，建议用 getComputedStyle 在下一帧调用）