Try the class below. With it, you should be able to say:
var myStylesheet = new CSSStyleSheet();
myStylesheet.addRule(".menuItemStyle",
"background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px");
You can add and modify style rules which enables you to manipulate the attributes of many elements at once:
myStylesheet.changeRule(".menuItemStyle", "background", "red");
Tested on IE, FF and Opera. As ever, YMMV.
/**
An object which encapsulates a dynamically created, modifiable stylesheet.
*/
function CSSStyleSheet()
{
/**
* The array of rules for this stylesheet.
* @private
*/
this.rules = [];
/**
* An associative array, keyed by the selector text containing the rule index number for
* the rule for that selector text.
* @private
*/
this.ruleIndex = [];
this.sheet = this.createSheet();
}
/**
Create the prototype with correct functions for the environment; No testing at runtime.
*/
CSSStyleSheet.prototype = function()
{
var useIEStyle = (document.createStyleSheet !== undefined);
var useDOMStyle = (!useIEStyle && (document.styleSheets !== undefined));
return {
createSheet: useIEStyle ?
function() {
return document.createStyleSheet();
} :
function() {
this.styleElement = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(this.styleElement);
return this.styleElement.styleSheet ? this.styleElement.styleSheet : this.styleElement.sheet;
},
addRule: useDOMStyle ?
function(selectorText, ruleText) {
if (!/^\{[^\}]*\}$/.test(ruleText))
ruleText = "{" + ruleText + "}";
var r = this.sheet.cssRules.length;
this.sheet.insertRule(selectorText + " " + ruleText, r);
var result = this.sheet.cssRules[r];
this.ruleIndex[selectorText] = r;
if (this.rules.length == 0)
this.rules = this.sheet.cssRules;
return result;
} : useIEStyle ?
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
var r = this.sheet.rules.length;
if (ruleText.length == 0)
ruleText = " "
this.sheet.addRule(selectorText, ruleText);
result = this.sheet.rules[r];
this.ruleIndex[selectorText] = r;
if (this.rules.length == 0)
this.rules = this.sheet.rules;
return result;
} :
// Browsers with no DOM stylesheet support
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
// If it exists, modify it.
if (!this.ruleIndex[selectorText])
this.ruleIndex[selectorText] = this.rules.length;
this.rules[this.ruleIndex[selectorText]] = ruleText;
// Build the innerHTML of the style element from our rules.
var cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
},
/**
* Change a style property in a rule.
* @param selectorText The identifier of the rule to change
* @param property The name of the style property to change
* @param value The new value of the style property.
*/
changeRule: useDOMStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var oldRule = this.rules[index];
if (oldRule)
{
var cssText = oldRule.cssText;
var propSearch = new RegExp("^[^\\{]*(\\{.*" + property + "\\s*\\:\\s*)([^};]*)([^}]*})");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
cssText = ruleText[1] + value + ruleText[3];
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
else
{
var propSearch = new RegExp("\\{([^}]*)}");
ruleText = propSearch.exec(cssText);
cssText = "{ " + ruleText[1] + "; " + property + ": " + value + " }";
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
} :
useIEStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
style[property] = value;
} :
// Browsers with no DOM stylesheet support
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^(.*" + property + "\\s*\:\\s*)([^;]*)(.*)$");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
this.rules[index] = ruleText[1] + value + ruleText[3];
}
}
else
{
this.rules[index] = cssText + "; " + property + ": " + value + ";";
}
// Rebuild the innerHTML of the style element from our rules.
cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
}
},
getRuleProperty: useDOMStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var oldRule = this.rules[index];
if (oldRule)
{
cssText = oldRule.cssText;
var propSearch = new RegExp("^.*" + property + "\\s*\\:\\s*([^};]*)");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
} : useIEStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
return style[property];
} :
// Browsers with no DOM stylesheet support
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];
// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^.*" + property + "\s*\:\s*([^;]*)");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
}
};
}();
