Question

I understand that the following method is great for setting CSS styles because of browser compatibility.

element.style.cssText = "color:red;";

What I can’t do is use cssText to apply styles on the :hover and :focus CSS events.

What do I do instead of this?

element.style.cssText = ":focus{color:red;}";

P.S. Don’t mention using javascript events such as onmouseover instead of the CSS :hover ( It doesn’t fit my situation.)

Answer 1

You can do it with some Voodoo magic:

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
var declarations = document.createTextNode('selector:pseudo { property: value }');

style.type = 'text/css';

if (style.styleSheet) {
  style.styleSheet.cssText = declarations.nodeValue;
} else {
  style.appendChild(declarations);
}

head.appendChild(style);

Not exactly what you needed, but you can tweak it and make a fancy function out of it if you want.