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

Question

我正在开发的东西很简单。

你点击一个按钮 (id="themes")，它会打开一个 div (id="themedrop") 并下滑展示主题列表。 (目前我只有两个主题)

<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>

现在当网站加载时，它会以style1.css（主题/原始主题）的样式加载

<link rel="stylesheet" type="text/css" href="style1.css">

现在我想要弄清楚的是... 当灰度按钮被点击时，如何让样式表从style1.css变为style2.css（注意：文件在同一个目录中）。

非常感谢任何帮助。

- Michael Schwartz

Answer 1

$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

试一下这个，但不确定是否有效，我没有测试过，祝好运。

- Val

---

“谢谢，这对我很有帮助。”（修改版）：$("button#grayscale").click(function() { $("link[rel=stylesheet]").attr({href : "style2.css"}); }); 当点击 id 为 grayscale 的按钮时，将当前网页中的样式表链接的 href 属性修改为 style2.css。 - Michael Schwartz

没错，你说得对，attr('href')哈哈，抱歉，顺便说一下，在选择器后面不需要按钮，紧跟着ID选择器，因为根据规范，ID应该是唯一的，不应该有重复的ID，所以我们使用类 :) - Val

好的回答。如果只涉及2个变量，那就没问题了。但对于3个样式表就行不通了。 - Jay

@jay，你总是可以将ID转换为类，但我想保持相对于所提出的问题的相关性 :) 但我同意你的观点 :) - Val

这非常好，但如何使用新的样式表重新加载页面？我也在使用LESS。我没有收到错误消息，但也没有重新加载。 - Reverend Bubbles

Answer 2

我建议您给 link 标签一个 ID，比如 theme。在按钮的 data 属性中放置 CSS 文件的名称，并在两个按钮上使用相同的处理程序：

HTML:

<link id="theme" rel="stylesheet" href="style1.css">

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

并且是 JavaScript：

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));
}

- Tetaxa

Answer 3

您可以通过以下方式尝试实现：

<link id="original" rel="stylesheet" type="text/css" href="style1.css">
<script>
function turnGrey(){
    //what ever your new css file is called
    document.getElementById("original").href="grey.css";
}
</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />

- none

Answer 4

使用以下代码：

<link href="Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />



<select id="changeCss"`enter code here`>
        <option onclick="selectCss(this)" value="Blue">Blue</option>
        <option onclick="selectCss(this)" value="Red">Red</option>
        <option onclick="selectCss(this)" value="Yellow">Yellow</option>
    </select>

<script type="text/javacript">
function selectCss() {
            var link = $("link[rel=stylesheet]")[0].href;
            var css = link.substring(link.lastIndexOf('/') + 1, link.length)
            $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
        }
</script>

- user4045479

Answer 5

我的网页默认使用黑色主题。为了将其转换为浅色主题，我使用了谷歌的太阳图标字体。因此，使用jQuery在两个主题之间切换的代码如下：

$('.theme').click(function() {
  if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') {
    **$('link').attr('href', 'css/styleslight.css');**
    $('.theme').children('img').attr('src', 'images/darktheme.png')
  } else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') {
    **$('link').attr('href', 'css/stylesdark.css');**
    $('.theme').children('img').attr('src', 'images/lighttheme.png');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

if和else if语句的第一行是完整的答案。余下的文本只涉及在单击时从月亮更改图标为太阳，或者反之。

- Aknk