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

我的工作很简单

您单击按钮

（id=“themes”）

，它会打开一个向下滑动并列出主题的div

（id=“themesrop”）

。（我现在只有两个）

原件

灰度

现在，当加载站点时，它将加载style1.css（主/原始主题）

现在我想弄明白的是。。。 当单击灰度按钮将样式表从style1.css更改为style2.css（注意：文件位于同一目录中）时，我怎么能做到这一点

任何帮助都将不胜感激

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

---

尝试一下，但不确定它是否有效。我没有测试它，但很幸运。

我建议您在

链接上标记一个id，例如主题。将css文件的名称放在按钮上的
data
-属性中，并在两个按钮上使用相同的处理程序：

Html:

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

<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 />


函数turnGrey（）{
//你的新css文件叫什么名字
document.getElementById（“原始”）.href=“grey.css”；
}
变灰

使用以下方法：

<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>


蓝色
红色
黄色的
函数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'）；
}
默认情况下，我的网页上有一个黑色主题。为了将其转换为light主题，我使用了google提供的sun图标字体。因此，用一种简单的方式，jquery中在主题之间切换的代码是：


$（'.theme'）。单击（函数（）{
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'）；
}
});
谢谢这帮了我的忙（修改版）：--$（“按钮#灰度”）。单击（函数（）{$（“链接[rel=stylesheet]”）。attr（{href:“style2.css”}）；}）；是的，你是对的，
attr（'href'）
lol，对不起，顺便说一句，你不需要在选择器前面加上id选择器，因为根据规范，id应该是唯一的，并且你不应该有重复的id，因此我们为什么使用类：）回答得好。如果只处理2个变体。对于3个样式表不起作用。@jay您总是可以将ID转换为类，但我想保持它与所问问题的相对性：）但我同意：）这很好，除了如何使用新样式表重新加载页面之外？我用更少的钱做这件事。我没有收到错误，但它也没有重新加载。
<link id="theme" rel="stylesheet" href="style1.css">

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

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

<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 />

<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>