Javascript 如何使用jQuery切换样式表？

我设计了一个多色模板，现在我只想改变“CSS”文件时，点击颜色图标，任何人都可以帮我吗

这是我的代码，但效果不好，只需更改颜色一次即可

$(document).ready(function() {
  $("a.silver").click(function() {
    $("a.silver").append('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>');
  });

  $("a.red").click(function() {
    $("a.red").append('<link rel="stylesheet" type="text/css" href="css/template.css"/>');
  });
});

$（文档）.ready（函数（）{
$（“a.silver”）。单击（函数（）{
$（“a.silver”）。附加（“”）；
});
$（“a.red”）。单击（函数（）{
$（“a.red”）。附加（“”）；
});
});

必须将Css链接添加到头部

             $(document).ready(function() {
               //load silver automatically in ready

                 $("a.silver").click(function() {
                         $('head > link').last().remove();   //removes red and adds silver
                         $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
                   });

                 $("a.red").click(function() {
                        $('head > link').last().remove();  //remove silver - adds red
                        .append('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>');
                          });
                    });
             });

$（文档）.ready（函数（）{
//自动将白银装入就绪状态
$（“a.silver”）。单击（函数（）{
$（'head>link'）.last（）.remove（）；//删除红色并添加银色
$（'head'）。追加（''）；
});
$（“a.red”）。单击（函数（）{
$（'head>link'）.last（）.remove（）；//删除银色-添加红色
.附加（“”）；
});
});
});

---

我的jQuery中的实际样式表不正确

如前所述，切换css样式而不是文件可能是最佳做法，但如果需要切换文件，请尝试：

$(function(){
    $('a.silver').click(function (){
       $('link[href="css/template.css"]').attr('href','themes/silver/css/template.css');
    });
    $('a.red').click(function (){
       $('link[href="themes/silver/css/template.css"]').attr('href','css/template.css');
    });
});

---

在这个解决方案中，您还必须像通常一样在头部定义样式…

因此，正如一些评论所说，您最好的选择是切换CSS类。但是如果你要改变整个页面的样式，那么交换样式表对我来说似乎是个好主意。但是，您没有必要在每次交换样式表时“重新生成”元素。如果需要的话，您最好将它们从DOM中分离出来。比如说：

$(document).ready(function() {
    var sheets = { //a map of sheets. Simply add sheets to this to add more themes (and create appropriate links to them)
        silver: $('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>'),
        red: $('<link rel="stylesheet" type="text/css" href="css/template.css"/>')
    };

    var currentSheet = sheets.red.appendTo($("head")); //attach default sheet

    $("a.swapStyle").click(function () {
         currentSheet.detach(); //remove the current sheet
         currentSheet = (sheets[$(this).attr("data-theme")]).appendTo($("head")); //attach a new sheet and set the currentSheet variable to remember it.
    });
});

<a href="javascript:void(0)" class="swapStyle" data-theme="red">Change to red theme</a>
<a href="javascript:void(0)" class="swapStyle" data-theme="silver">Change to silver theme</a>

$（文档）.ready（函数（）{
var sheets={//一个工作表映射。只需将工作表添加到该映射中，即可添加更多主题（并创建相应的链接）
银币：$（''），
红色：$（''）
};
var currentSheet=sheets.red.appendTo（$（“head”）；//附加默认工作表
$（“a.swapStyle”）。单击（函数（）{
currentSheet.detach（）；//删除当前工作表
currentSheet=（sheets[$（this）.attr（“数据主题”）））.appendTo（$（“head”）；//附加新的工作表并设置currentSheet变量以记住它。
});
});

您需要将链接更改为以下内容：

$(document).ready(function() {
    var sheets = { //a map of sheets. Simply add sheets to this to add more themes (and create appropriate links to them)
        silver: $('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>'),
        red: $('<link rel="stylesheet" type="text/css" href="css/template.css"/>')
    };

    var currentSheet = sheets.red.appendTo($("head")); //attach default sheet

    $("a.swapStyle").click(function () {
         currentSheet.detach(); //remove the current sheet
         currentSheet = (sheets[$(this).attr("data-theme")]).appendTo($("head")); //attach a new sheet and set the currentSheet variable to remember it.
    });
});

<a href="javascript:void(0)" class="swapStyle" data-theme="red">Change to red theme</a>
<a href="javascript:void(0)" class="swapStyle" data-theme="silver">Change to silver theme</a>

不要这样做。改为切换类。@MattBall我不知道为什么，这就是我问的原因。我会去交换样式表。仅仅更改类对我来说是错误的-它不能很好地扩展。@ScottSelby如前所述，“silver”样式表将扩展（和/或覆盖）原始样式表，而不是替换它。这将使页面呈现程序有更多的工作要做。@Alnitak-.toggleClass是动态更改样式的首选方法-他特别希望“添加或删除样式表”。这是最接近我的方法的外观，对于两种以上的颜色方案，这将非常适合缩放。但我还是想知道为什么人们在争论换班。类不应该表示特定的颜色等。类应该保持不变，并且这些类的样式应该改变。另一方面，只需使用

.detach（）

删除当前工作表，它仍然会在内存中挂起…@Alnitak我想他们说的是这样的：谢谢大家，因为我还是一个使用JQuery的初学者，所以你所说的对我来说非常有用。。。所有这些方法都会改变颜色，但当我刷新页面或导航到另一个页面时，它会返回到默认样式表。@Alnitak我使用了detach，因为它在切换回上一个主题时节省了一些处理时间，而牺牲了一些内存。如果开发者愿意，这是一种权衡，他们可以选择忽略。@SabryMuhamadSabry IMHO，Pete的答案要好得多。@Alnitak他为不重新生成整个样式标记提供了支持，但你没有为这个答案不可用提供任何辩护valid@r0m4n我没说这个答案无效，我说皮特的更好。具体地说，他的答案将微不足道地扩展到两个以上的备选主题。你的不会。这不是他的问题“我如何用jQuery切换样式表？”在他当前的回答中，甚至没有样式表会加载到禁用的jsOH上真的吗？我尝试了两个以上主题的“r0m4n”代码，效果很好。。。而且我还是更喜欢“r0m4n”代码，因为我写得更少：）