如何读取CSS伪类（如:hover）的属性值？

尝试使用window.getComputedStyle()读取元素:hover状态的CSS属性值，但返回的是元素默认状态的属性值，而非预期的伪类状态值。

示例代码 #

HTML代码

<html>
<head>
  <style>
   #lo {
     color: green;
   }

   #lo:hover {
     color: black;
   }
  </style>
</head>

<body>
  <h1 class="yo" id="lo">hello</h1>
</body>
</html>

JS代码

let element = document.getElementById("lo");
console.log(window.getComputedStyle(element,':hover').getPropertyValue("color"));

当前返回值为rgb(0, 128, 0)（默认绿色），而非预期的black（hover状态颜色）。

原因分析 #

现代浏览器中，getComputedStyle()的第二个伪类参数（如:hover）无法正确获取未触发状态下的伪类样式，因为伪类样式只有当元素实际处于该交互状态时才会被计算应用。

解决办法 #

方法1：临时触发伪类状态后获取样式

通过模拟鼠标事件触发元素的:hover状态，获取样式后再恢复原状态：

let element = document.getElementById("lo");

// 触发mouseover事件，激活:hover状态
element.dispatchEvent(new MouseEvent('mouseover'));

// 获取计算后的样式
const hoverColor = window.getComputedStyle(element).getPropertyValue("color");
console.log(hoverColor); // 输出rgb(0, 0, 0)（对应black）

// 触发mouseout事件，恢复原状态
element.dispatchEvent(new MouseEvent('mouseout'));

方法2：直接解析CSS样式表

遍历页面的CSS样式表，匹配对应的伪类选择器规则，提取属性值：

function getPseudoStyle(element, pseudo) {
  // 构造匹配的选择器文本
  const selector = `${element.tagName.toLowerCase()}#${element.id}${pseudo}`;
  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历样式表中的规则
      for (const rule of sheet.cssRules) {
        if (rule.selectorText === selector) {
          return rule.style.color;
        }
      }
    } catch (e) {
      // 跨域样式表会抛出权限错误，直接跳过
      continue;
    }
  }
  return null;
}

let element = document.getElementById("lo");
console.log(getPseudoStyle(element, ':hover')); // 输出black

这种方法无需触发元素状态，但需要确保选择器完全匹配样式表中的定义，且无法处理继承或优先级冲突后的最终样式。

内容的提问来源于stack exchange，提问作者Abhay Salvi