为什么getComputedStyle不适用于像:hover这样的伪类

Why doesn't getComputedStyle work with pseudo classes like :hover?

本文关键字：hover getComputedStyle 不适用 适用于 为什么      更新时间：2023-09-26
根据

文档，window.getComputedStyle函数应该能够获得伪类的计算样式，如：hover。

它也被解释为另一个问题的答案

但正如该问题中的最后一条评论所说，实际上它根本不起作用，它只是返回正常样式，而不是 ：hover 样式。你可以在这个jsfiddle中亲眼看到。警报返回红色，而不是绿色。

关于 developer.mozilla.org 的文档也有一个示例，但这也不起作用 - 请参阅此处。

在这个问题中，

回答者在评论中指出它根本不起作用，但没有给出解释。

可能是样式表必须在函数返回正确值之前完全呈现吗？我尝试设置一些延迟，但似乎没有任何效果。

我尝试了最新的Firefox，Chrome和IE浏览器。有谁知道为什么这个函数没有按预期工作？

var style = window.getComputedStyle(element[, pseudoElt]);

其中pseudoElt是"指定要匹配的伪元素的字符串"。伪元素类似于::before或::after，这些是由CSS样式生成的元素。 :hover、:visited或其他类似的效果是伪音类。它们不会创建新元素，而是将专门的类样式应用于元素。

不可能

获得伪类的计算风格，至少不能使用 getComputedStyle .但是，您可以遍历CSS规则并尝试找到合适的选择器，但我不建议您这样做，因为某些浏览器不会遵循DOM级别2样式规则，并且您必须检查哪个规则会影响您的特定元素：

/* Style */
p a:hover{ color:yellow; background:black;}
p > a:hover{ color:green; background:white;}
p > a+a:hover{ color:fuchsia; background:blue;}

// JS
var i,j, sel = /a:hover/;
for(i = 0; i < document.styleSheets.length; ++i){
    for(j = 0; j < document.styleSheets[i].cssRules.length; ++j){    
        if(sel.test(document.styleSheets[i].cssRules[j].selectorText)){
            console.log(
                document.styleSheets[i].cssRules[j].selectorText,
                document.styleSheets[i].cssRules[j].style.cssText
            );
        }
    }
}

结果：P A：悬停颜色：黄色;背景：无 重复滚动 0% 0% 黑色;P> A：悬停颜色：绿色;背景：无 重复滚动 0% 0% 白色;P> A + A：悬停颜色：紫红色;背景：无 重复滚动 0% 0% 蓝色;

另请参阅：

  • MDN：getComputedStyle示例
  • W3C： CSS2： 5.10 伪元素和伪类
  • SO：从 JavaScript 设置 CSS 伪类规则

请注意，有一种方法至少可以在打开远程调试端口的情况下对 Chrome 执行此操作。基本上你需要使用 WebSocket，连接到远程调试器 url，然后发出以下命令：

send  { id: 1, method: "Inspector.enable" }
send  { id: 2, method: "DOM.enable" }
send  { id: 3, method: "CSS.enable" }
send  { id: 4, method: "DOM.getDocument" }
send  { id: 5, method: "DOM.querySelector", params: { nodeId: 1, selector: <<whatever you want>> } }
nodeId = response.result.nodeId
send  { id: 6, method: "CSS.forcePseudoState", params: { nodeId:, forcedPseudoClasses: [ "hover" <<or whatever>> ] } }

然后，您可以使用常规的getComputedStyle或CSS.getComputedStyleForNode调试器API。

相关文章：