Jquery - 更改完整的 CSS(实习生)

Question

我尝试更改完整的 CSS 代码(如样式浏览器)。

第一个解决方案

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

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

它在 FF、Chrome 和 Safari 中运行良好……但在 IE 中却不行。

我的第二个解决方案

var myStyle = document.styleSheets[1];

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

如何使用第二种解决方案更改完整的 CSS。我只找到了一个“方法”removeRule、deleteRule、addRule、insertRule。

PS: 还是可以使用第一种方案？

Answer 1

我还没有在所有浏览器中对此进行测试，但我相信您可以为每个样式表添加一个类作为所有 css 的前缀，然后只需切换 body 类？

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

这将允许您加载单独的样式表(myTheme.css、myTheme2.css)

第一种风格:

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

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

第二种风格:

body.myTheme2{
  background-color:white;
}

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