用 jQuery 替换样式表答案

【问题标题】：Replace stylesheet with jQuery用 jQuery 替换样式表
【发布时间】：2012-05-03 21:08:10
【问题描述】：

替换是实时完成的——用户点击某些东西，样式会改变：

$('link#mystyle').attr('disabled', 'disabled');
$('link#mystyle').remove();

if(new_style){
  $('head').append('<link rel="stylesheet" id="mystyle" href="' 
                    + new_style +'.css" type="text/css" />');

}

问题是样式表链接后面默认有一个内联样式块：

<style>
  ...
</style>

而且我上面的代码会删除原来的样式表，并在样式块之后追加新的样式表，所以新的样式表会覆盖样式块中的一些规则。

我不希望这样，所以我可以以某种方式将我的新样式附加到同一个位置，以便以与初始样式表规则相同的优先级应用新样式表中的规则吗？

【问题讨论】：

添加新的 CSS 文件后，您可以返回，抓取 STYLE 块，将其删除，然后重新添加。不过，看起来很hacky。我确信有更好的选择。
你可以换掉链接标签中的 href 参数。您需要帮助吗？
虽然我没试过，$('link#mystyle').replaceWith($(''))，应该可以工作
是的，我想问一下如果只是更改 href 是否可行：$("#mystyle").attr("href", new_style);
在 IE 中更改 href 在执行 3-4 次后失败。看来这是这个浏览器的内存问题..

标签： jquery html css stylesheet

【解决方案1】：

更好的解决方案是根据 body 标签上的高级类或 id 格式化你的 css：

/*Style 1*/
body.style1 h1{...}
body.style1 ...

/*Style 2*/
body.style2 h1{...}
body.style2 ...

然后，你所要做的就是改变body标签上的类：

$('#something-to-click').click(function(){
  ($('body').hasClass('style1')){
    $('body').addClass('style2').removeClass('style1');
  }else{    
    $('body').addClass('style1').removeClass('style2');
  }
});

【讨论】：

我很想看看你是如何处理你的 CSS 规则的......任何相同的规则都不需要复制，只有不同的特定规则需要被专门分配给适用的类变体
这些 css 文件代表不同的网站设计。除了布局尺寸定义（大约只有 15-20 行代码），一切都不同
也许使用 url 参数改变样式表并在服务器端进行更改？最好在服务器上解析一个简单的 if 语句，而不是推动用户浏览器的限制。

【解决方案2】：

@Kroehre 是对的，但如果您坚持按照自己的方式进行操作，则可以使用 http://api.jquery.com/replaceWith/ 方法。

$('link#mystyle').replaceWith('<link rel="stylesheet" id="mystyle" href="' 
                + new_style +'.css" type="text/css" />');

应该做你想做的。

【讨论】：

我认为这不会比仅仅更改 href attr 更好吗？
在 IE 9 中更改 href 会弄乱网站，但您的解决方案似乎有效。