Home/ Questions/Q 8224865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T15:13:08+00:00

The function window.getComputedStyle is supposed to be able to get the computed style of

  • 0

The function window.getComputedStyle is supposed to be able to get the computed style of pseudo classes like :hover, according to the documentation.

It’s also explained as an answer in another question

But as the last comment says in that question, in fact it doesn’t work at all, it just returns the normal style, not the :hover style. You can see for yourself in this jsfiddle. The alert returns the red color, not the green one.

The documentation on developer.mozilla.org also has an example, but that doesn’t work either – see here.

In this question the answerer states in a comment that it won’t work at all, but without giving an explanation.

Could it be that the stylesheet has to be fully rendered before the function returns the correct value? I’ve tried setting some delays, but nothing seems to work.

I’ve tried the latest Firefox, Chrome and IE browsers. Does anybody know why this function is not working as expected?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    where pseudoElt is “a string specifying the pseudo-element to match”. A pseudo-element is something like ::before or ::after, those are elements which are generated by CSS styles. :hover, :visited or other similar effects are pseuodo-classes. They won’t create new elements but apply specialized class styles to the element.

    It’s not possible to get the computed style of a pseudo-class, at least not with getComputedStyle. You can however traverse through the CSS rules and try to find a fitting selector, but I won’t recommend you to do this, since some browsers won’t follow the DOM-Level-2-Style rules and you would have to check which rule will affect your specific element:

    /* 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;

    See also:

    • 0