Read :hover pseudo class with javascript

前端未结

关注

 5  1514

I made a function that overwrite the the :hover of some elements on a page. It fades between the normal and the :hover effect. That for i had to create a .hover class in my

相关标签:

5条回答

别那么骄傲

2020-11-29 12:13
There is an alterantive way to get :hover pseudo class with javascript. You can write your styles of hover pseudo class in a content property.
```
p::before,
p::after{
  content: 'background-color: blue; color:blue; font-size: 14px;';
}
```
then read from it via getComputedStyle() method:
```
console.log(getComputedStyle(document.querySelector('p'),':before').getPropertyValue('content'));
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-11-29 12:14
UPDATE: I somehow got this wrong. The below example doesn't work. See @bfavaretto's comment for an explanation.

~~In Firefox, Opera and Chrome or any other browser that correctly implements window.getComputedStyle is very simple. You just have to pass "hover" as the second argument:~~
```
<!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>
```
~~But I don't believe there's yet a solution for Internet Explorer, except for using document.styleSheets as Gumbo suggested. But there will be differences.~~ So, having a .hover class is the best solution so far. Not unclean at all.
0 讨论(0)
发布评论:

提交评论
- 加载中...

别那么骄傲

2020-11-29 12:20

Using getComputedStyle as on the accepted answer won't work, because:

The computed style for the hover state is only available when the element is actually on that state.
The second parameter to getComputedStyle should be empty or a pseudo-element. It doesn't work with :hover because it's a pseudo-class.

Here is an alternative solution:

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

0 讨论(0)

旧时难觅i

2020-11-29 12:37

You could access document.styleSheets and look for a rule that is applied on that specific element. But that’s not any cleaner than using a simple additional class.

0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-11-29 12:38

If there are any people here who use the questions accepted answer but it won't work, here's a nice function that might:

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

0 讨论(0)