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.)

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.)

• javascript
• css
• dom
• stylesheet

• onmouseover is the same as hover; you can attach that event and simply add a class, and via CSS style that class. Has higher reusability. – Zirak Commented May 15, 2011 at 5:56
• Why just don't define it in a normal css and change only class in javascript? – Dmitry Commented May 15, 2011 at 6:01
• @Zirak, almost. :hover works only on <a> tags in IE6, but onmouseover works on virtually all of the elements. They are similar, but not the same. – Blender Commented May 15, 2011 at 6:03
• 2 @Zirak , and @Dmitry those two options are not available in this circumstance. Do you know a method? – Web_Designer Commented May 16, 2011 at 4:00

2 Answers 2

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.

You could always add an individual style rule to an existing style sheet, instead of creating a new style element. Something along the lines of:

function addStyle() {
    var style = document.styleSheets[0];        //select style sheet (0==first)
    var styleSel = ".class:hover";              //define selector
    var styleDec = "color: red;";             //define declaration

    if(style.insertRule) {        //for modern, DOM-compliant browsers

        style.insertRule(styleSel+'{'+styleDec+'}', style.cssRules.length);
        //I chose to do it this way to more easily support the addRule method, but
        //know that insertRule only needs two parameters, full style rule
        //(selector+prop/value declarations), and index to insert rule at
        //                  styleSheets[0].insertRule(rule, index);

    }else {                       //for IE < 9
        style.addRule(styleSel, styleDec, -1);
    }
}

I adapted the example at MDN
This assumes you are using a class (that is already defined and applied) to add the :hover pseudo-selector to, but it could just as easily be an ID or element selector.

If you were unable to add a class or style rule beforehand, you could also do that dynamically in much the same way (define class, define class:hover, then apply class to desired elements).