Find non-active CSS properties

Question

Is it possible to determine styles in a CSS file through Javascript?

I am trying to detect CSS properties that will be applied to an element in a certain state, :hover in this case, but without those properties currently being active on the element. I had thought about cloning the element, appending the clone as a sibling with display:none and querying properties that way, but I don't know how to force the :hover style through Javascript. Any ideas?

Answer 1

the hover style is applied by the browser, dependnt on the mouse movement. I don't think you can force it through JS. But why would you want to? just define another css class and assign it through the className property in JS.

Answer 2

To determine styles throught JS, you can do using className like this e.g:

item.onmouseover = gohover;

item.onmouseout = nohover;

function gohover(){this.className = gClass;}

...

Answer 3

If I'm understanding your question correctly, it seems like what you're looking for is an XPath for CSS (pseudo-)classes. Other than fetching the CSS file with Ajax and searching with regex, I'm not aware of any method of retrieving style information from a CSS file.

Answer 4

I believe you are interested in the styleSheets array that is a property of the document (document.styleSheets) This array indexes all of the style sheets referenced by the current page and allows you to iterate over all of the style rules in each sheet. The W3C array (Firefox, Opera, Safari) for accessing css rules is cssRules whereas Microsoft's array is rules. The following code snippet is taken from www.quirksmode.org:

var theRules = new Array();
if (document.styleSheets[1].cssRules)
    theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
    theRules = document.styleSheets[1].rules

Now theRules contains the rules for the second stylesheet for the document. See quirksmode's reference and compatibility tables for more info on accessing CSS rules from JavaScript.