Jquery - Change the complete CSS (intern)

I try to change the complete CSS code (like a stylebrowser).

First solution

new_css = ' body {color:#00ff00; } #div { border: 1px solid red; }';

$("head > style:eq(1)").html(new_css);

It works fine in the FF, Chrome & Safari ... but not in the IE.

My second solution

var myStyle = document.styleSheets[1];

if( myStyle.cssRules )
{
    myStyle.insertRule('#dd { display:block; }', 0);            
} 
else
{
    if ( myStyle.rules )
    {
        myStyle.addRule('#dd'', 'display:block;');                  
    }
}

How can I change the complete CSS with the second solut开发者_如何学Goion. I found only the single "methods" removeRule, deleteRule, addRule, insertRule.

PS: Or is it maybe possible to use the first solution?

I haven't tested this in all browsers, but I believe that you could prefix all your css with one class per stylesheet, and then just switch the body class?

$("body").attr("class","myTheme2");

This would allow you to load separate stylesheets (myTheme.css, myTheme2.css)

First style:

body.myTheme1{
  background-color:#321212;
}

body.myTheme1 div{
  background-color:#334231;
}

Second style:

body.myTheme2{
  background-color:white;
}

body.myTheme2 div{
  background-color:#889911;
}

You can also take this approach to it:

$('body').css('color','#00ff00'); $('#div').css('border','1px solid red');

This will set the body and the #div how you intended.

Or an even better solution is to just add those statements into the css, unless you want those to change dynamically having the css there all along is the best solution.