javascript - 为什么 getComputedStyle 不能使用像 :hover? 这样的伪类

Question

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

它也在 another question 中作为答案进行了解释

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

documentation on developer.mozilla.org也有一个示例，但这也不起作用 - 请参阅 here .

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

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

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

Answer 1

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

pseudoElt 是“指定要匹配的伪元素的字符串”。伪元素 类似于::before 或::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
            );
        }
    }
}

Result:p a:hover color: yellow; background: none repeat scroll 0% 0% black; p > a:hover color: green; background: none repeat scroll 0% 0% white;p > a + a:hover color: fuchsia; background: none repeat scroll 0% 0% blue;

另见:

• MDN:getComputedStyle examples
• W3C:CSS2: 5.10 Pseudo-elements and pseudo-classes
• 所以:Setting CSS pseudo-class rules from JavaScript