Setting CSS pseudo-class rules from JavaScript

Question

I\'m looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript.

So an analogue of the CSS code: a:hove

Answer 1

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS. Reasons being:

• Setting styles that must be calculated or retrieved - for example setting the user's preferred font-size from a cookie.
• Setting behavioural (not aesthetic) styles, especially for UI widget/plugin developers. Tabs, carousels, etc, often require some basic CSS simply to function - shouldn't demand a stylesheet for the core function.
• Better than inline styles since CSS rules apply to all current and future elements, and don't clutter the HTML when viewing in Firebug / Developer Tools.