13

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

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

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

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

在这个问题中，回答者在评论中说它根本不起作用，但没有给出解释。

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

我试过最新的 Firefox、Chrome 和 IE 浏览器。有谁知道为什么这个功能没有按预期工作？

4

2 回答 2

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

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

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

/* 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
            );
        }
    }
}

结果：
pa：悬停颜色：黄色；背景：无重复滚动 0% 0% 黑色；
p > a：悬停颜色：绿色；背景：无重复滚动 0% 0% 白色；
p > a + a：悬停颜色：紫红色；背景：无重复滚动 0% 0% 蓝色；

也可以看看：

于 2012-07-15T21:15:28.470 回答
2

请注意，至少对于打开远程调试端口的 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。

于 2015-09-09T03:11:24.423 回答