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 CSS file. I think this is a little unclean. How could i read the the :hover pseudo class contents?
-
you might want to revisit this question. The owner of the accepted answer has edited it to point out that it is wrong.Quentin– Quentin2022年10月31日 11:14:59 +00:00Commented Oct 31, 2022 at 11:14
5 Answers 5
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
getComputedStyleshould be empty or a pseudo-element. It doesn't work with:hoverbecause 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'));
2 Comments
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.
2 Comments
<link rel="stylesheet" href="//example.com/css" crossorigin="anonymous" /> + a suitable access-control-allow-origin header on the response from example.com.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 So, having a document.styleSheets as Gumbo suggested. But there will be differences. (削除ここまで).hover class is the best solution so far. Not unclean at all.
10 Comments
getComputedStyle expects a pseudo-element as the second parameter, and hover is a pseudo class. If you remove that, it will work, but will only give you the hover value if it runs while the element is actually on hover state. demo.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;
}
}
1 Comment
myrules (which, as it stands, will cause the code to throw a reference error) and (d) the element you are looking for is the last element in the document which meets condition A.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'));
1 Comment
content value and :hover rules in sync while accounting for the cascade.