读取：使用javascript悬停伪类

我做了一个函数，覆盖页面上某些元素的：悬停。它在正常和：悬停效果之间衰减。为此，我必须在CSS文件中创建一个.hover类。我觉得这有点不干净。如何读取：hover伪类内容

您可以访问并查找应用于该特定元素的规则。但这并不比使用一个简单的附加类更干净。

更新：我不知怎的弄错了。下面的示例不起作用。请参阅以获取解释

在Firefox、Opera和Chrome或任何其他能够正确实现的浏览器中都非常简单。只需将“hover”作为第二个参数传递：

div{
显示：块；
宽度：200px；
高度：200px；
背景：红色；
}
div:悬停{
背景：绿色；
}
window.onload=函数（）{
var div=document.getElementsByTagName（“div”）[0]；
var style=window.getComputedStyle（div，“悬停”）；
警惕（风格背景色）；
};

---

但我不相信Internet Explorer还有解决方案，除了像Gumbo建议的那样使用

document.styleSheets

。但会有不同。因此，拥有一个

.hover

类是迄今为止最好的解决方案。一点也不肮脏。

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

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;
    }
}

函数getPseudoStyle（id，style）{ var all=document.getElementsByTagName（“*”）； 对于（变量i=0，max=all.length；i在接受的答案上使用as将不起作用，因为：

仅当元素实际处于悬停状态时，悬停状态的计算样式才可用

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'));

函数getCssPropertyForRule（规则，属性）{
var sheets=document.styleSheets；
var slen=板材长度；
对于（var i=0；i有另一种获取
的方法：使用javascript编写hover
伪类。您可以在
内容
属性中编写
hover
伪类的样式

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

然后通过以下方法读取：

thx！也许它不是不干净的，但使用我的函数的人必须知道他必须这么做。hover类。避免这种情况会很好。@david，出于好奇，你打算如何处理IE问题？@Ionut:这是一个很好的例子，说明浏览器不一致，不值得你花时间修复。如果有人使用劣质浏览器，他们会“我仍然会有一个正常工作的网站，它只是不会有好的小触感。@nickf，我完全同意这一点，但有些情况下，客户非常希望她正在使用的浏览器具有相同的外观（IE6）。我遇到了这样的问题。否则，渐进式增强是可行的。这是行不通的，因为
getComputedStyle
需要一个伪元素作为第二个参数，而
hover
是一个伪类。如果删除它，它会起作用，但只有在元素实际运行时才会给你hover值ode>hover
state..document.stylesheets中没有从外部文件加载的样式表。可能完全相同，但的方法允许使用不是整个规则选择器的选择器。由于域限制，这在其他域的样式表上不起作用。因此，这是部分解决方案
p::before,
p::after{
  content: 'background-color: blue; color:blue; font-size: 14px;';
}

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