insertRule vs. addRule

Hello,

I wrote a small function that launches insertRule or addRule based on browser support, to change style of DOM elements.


function changeRule(selector, rule) {
var sheet = frames['testsite'].document.styleSheets[1];
if (sheet.insertRule) { // firefox
sheet.insertRule(""+selector+" { "+rule+" }", sheet.cssRules.length);
}
else if(sheet.addRule) { // ie
sheet.addRule(selector, rule);
}
}


and I call the function as follows:


var TM1 = "margin: 0; padding: 0; list-style: none; z-index: 6; font-family: "+TopmenuUlFontFamily+"; font-size: "+TopmenuUlFontSize+"px; font-weight: "+TopmenuUlFontWeight+"; text-align: "+TopmenuUlTextAlign+";";
changeRule("#topmenu ul",TM1);


It works for Firefox, but not for IE. I guess this is because addRule accepts one rule per command. How can I solve this problem?

you could try this:


function changeRule(selector, rule) {
var sheet = frames['testsite'].document.styleSheets[1];
try{
sheet.insertRule(""+selector+" { "+rule+" }",
}
catch(msie)
{
try{
sheet.addRule(selector, rule);
}
catch(err)
{
alert("welcome to 1995." + err)
}
}
}


the Welcome to 1995 set just in case the browser doesn't support both methods.

Hi,

thanks for your answer. Actually, the problem looks like this:

insertRule(FF) supports a ruleset in a single line like:


var CSS = "margin: 0; padding: 0; list-style: none; z-index: 6;";
changeRule("#selector",CSS);


works with no problems. But addRule does not work this way, I guess it expects:


addRule(selector,'margin:0;');
addRule(selector,'padding:0;');
addRule(selector,'list-style:none;');
addRule(selector,'z-index:6;');

http://developer.mozilla.org/en/docs/DOM:stylesheet.insertRule
insertRule(rule, index) Rules should be placed in front, index on 2nd.

so it should be:
var CSS = "margin: 0; padding: 0; list-style: none; z-index: 6;";
changeRule(CSS,"#selector");

HOWEVER
addRule is (index,rule)
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/addRuleSyntaxParametersandNote.htm
watch out for that.

No, it is insertRule(rule, index). rule includes the selector, like html { color: lime; }, and index is a different thing. So there is no problem with my usage.

addRule is different. It requires to parameters like selector and rule.
addRule(selector, rule). Like addRule('html','color: lime;').

Anyway, I solved my problem using arrays. Here I post the code:



function changeRule(selector, ruleArray) {
var sheet = frames['testsite'].document.styleSheets[1];
if (sheet.insertRule) { // firefox
var rule = '';
for(i=0; i<ruleArray.length; i++) {
rule += ruleArray[i];
rule += ' ';
}
sheet.insertRule(""+selector+" { "+rule+" }", sheet.cssRules.length);
}
else if(sheet.addRule) { // ie
var rule = '';
for(i=0; i<ruleArray.length; i++) {
sheet.addRule(selector, ruleArray[i]);
}
}
}

var CSS = new Array("padding: "+TopmenuTdPadding+"px;","background-color: "+TopmenuTdBackgroundColor+";","text-align: "+TopmenuTdTextAlign+";");
changeRule("#selector",CSS);