insertRule vs. addRule

[guvenck]

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?

[noPCtoday]

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.

[guvenck]

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;');

[noPCtoday]

http://developer.mozilla.org/en/docs...eet.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/JavaScrip...ersandNote.htm
watch out for that.

[guvenck]

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