Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    insertRule vs. addRule

    Hello,

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

    Code:
    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:

    Code:
    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?

  • #2
    Registered User
    Join Date
    Jun 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts
    you could try this:

    Code:
    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.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    Hi,

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

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

    Code:
    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:

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

  • #4
    Registered User
    Join Date
    Jun 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://developer.mozilla.org/en/docs...eet.insertRule
    insertRule(rule, index) Rules should be placed in front, index on 2nd.

    so it should be:
    Code:
    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.

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    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:


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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •