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.)
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).
onmouseoveris the same ashover; you can attach that event and simply add a class, and via CSS style that class. Has higher reusability.:hoverworks only on<a>tags in IE6, butonmouseoverworks on virtually all of the elements. They are similar, but not the same.