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

时间:2011-10-21 08:40:23

标签: jquery css themes stylesheet

我正在做的事情很简单。

点击按钮(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(注意:文件位于同一目录中)

非常感谢任何帮助。

5 个答案:

答案 0 :(得分:63)

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

尝试一下,但不确定它是否会起作用我还没有测试过,但运气好。

答案 1 :(得分:26)

我建议你给link - 标签一个id,例如主题。将css文件的名称放在按钮上的data - 属性中,并对它们使用相同的处理程序:

HTML:

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

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

和js:

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

答案 2 :(得分:8)

快速的方法是,

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

答案 3 :(得分:3)

使用此:

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

答案 4 :(得分:1)

默认情况下,我的网页上有一个深色主题。为了将其转换为浅色主题,我使用了谷歌的太阳图标字体。所以简单来说,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 语句的第一行是完整的答案。剩下的文字只涉及在从月亮到太阳点击时更改图标,反之亦然。