阅读：使用 javascript 悬停伪类答案

【问题标题】：Read :hover pseudo class with javascript阅读：使用 javascript 悬停伪类
【发布时间】：2009-08-16 18:50:40
【问题描述】：

我创建了一个函数来覆盖页面上某些元素的 :hover。它在正常和 :hover 效果之间消失。因为我必须在我的 CSS 文件中创建一个 .hover 类。我觉得这有点不干净。我如何阅读 :hover 伪类内容？

【问题讨论】：

【解决方案1】：

在接受的答案中使用getComputedStyle 将不起作用，因为：

仅当元素实际处于该状态时，悬停状态的计算样式才可用。
getComputedStyle 的第二个参数应该为空或伪元素。它不适用于 :hover，因为它是一个伪类。

这是一个替代解决方案：

function getCssPropertyForRule(rule, prop) {
    var sheets = document.styleSheets;
    var slen = sheets.length;
    for(var i=0; i<slen; i++) {
        var rules = document.styleSheets[i].cssRules;
        var rlen = rules.length;
        for(var j=0; j<rlen; j++) {
            if(rules[j].selectorText == rule) {
                return rules[j].style[prop];
            }
        }
    }
}

// Get the "color" value defined on a "div:hover" rule,
// and output it to the console
console.log(getCssPropertyForRule('div:hover', 'color'));

Demo

【讨论】：

疑似相同，但this answer 的方法允许选择器不是整个规则选择器。
由于域限制，这不适用于其他域的样式表。所以这是部分解决方案

【解决方案2】：

您可以访问document.styleSheets 并查找应用于该特定元素的规则。但这并不比使用简单的附加类更简洁。

【讨论】：

从外部文件加载的样式表在 document.styleSheets 中不可用。

【解决方案3】：

更新：我不知怎么弄错了。下面的例子不起作用。请参阅@bfavaretto's comment 了解说明。

~~在 Firefox、Opera 和 Chrome 或任何其他正确实现 window.getComputedStyle 的浏览器中非常简单。您只需将“悬停”作为第二个参数传递：~~

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
  display: block;
  width: 200px;
  height: 200px;
  background: red;
}
div:hover {
  background: green;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var style = window.getComputedStyle(div, "hover");
    alert(style.backgroundColor);
};
</script>
</body>
</html>

~~但我认为 Internet Explorer 尚无解决方案，除非按照 Gumbo 的建议使用 document.styleSheets。但是会有区别。~~因此，拥有.hover 类是目前最好的解决方案。一点都不干净。

【讨论】：

谢谢！也许它不是不干净的，但使用我的功能的人必须知道他必须做 .hover 类。最好避免这种情况。
@david，出于好奇，你打算如何处理 IE 问题？
@Ionut：这是浏览器不一致的一个很好的例子，不值得你花时间修复。如果有人使用劣质的浏览器，他们仍然会得到一个正常工作的网站，只是不会有漂亮的小细节。
@nickf，我完全同意这一点，但在某些情况下，客户迫切希望在她使用的浏览器 (IE6) 中具有相同的外观。我遇到了这样的问题。否则，渐进式增强就是要走的路。
这行不通，因为getComputedStyle 需要一个伪元素作为第二个参数，而hover 是一个伪类。如果您删除它，它将起作用，但只有在元素实际处于hover 状态时运行时才会为您提供悬停值。 demo.

【解决方案4】：

如果这里有人使用接受的问题的答案但它不起作用，这里有一个很好的功能可能：

function getPseudoStyle(id, style) {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var targetrule = "";
        if (all[i].id === id) {
            if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule
                targetrule=myrules[i]
            }
        }
        return targetrule;
    }
}

【讨论】：

【解决方案5】：

有一种替代方法可以使用 javascript 获取 :hover 伪类。您可以在content 属性中编写hover 伪类的样式。

p::before,
p::after{
  content: 'background-color: blue; color:blue; font-size: 14px;';
}

然后通过getComputedStyle()方法从中读取：

console.log(getComputedStyle(document.querySelector('p'),':before').getPropertyValue('content'));

【讨论】：