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

Posted

技术标签:

【中文标题】如何使用 jQuery 切换我的 CSS 样式表?【英文标题】:How do I switch my CSS stylesheet using jQuery? 【发布时间】:2011-12-12 10:00:06 【问题描述】:

我的工作很简单。

您单击一个按钮(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 时,我怎么能得到它(注意:文件在同一目录中)

任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:
$('#grayscale').click(function ()
   $('link[href="style1.css"]').attr('href','style2.css');
);
$('#original').click(function ()
   $('link[href="style2.css"]').attr('href','style1.css');
);

试一试,但不确定它是否会工作我没有测试过,但运气好。

【讨论】:

感谢这帮助了我(修改版):--- $("button#grayscale").click(function() $("link[rel=stylesheet]").attr( href : "style2.css"); ); 是的,你是对的,attr('href') 大声笑,对不起,顺便说一句,你不需要选择器前面的按钮后跟 id 选择器,因为根据规范,ID 应该是唯一的,你不应该有重复 ID,因此我们使用类 :) 不错的答案。如果只处理 2 个变体。不适用于 3 个样式表。 @jay 你总是可以将 id 转换为类,但我想保持它与所提出的问题相关:) 但我同意你的观点:) 这很好,除了如何让页面重新加载新样式表?我也在用 LESS 做这个。我没有收到错误,但它也没有重新加载。【参考方案2】:

我建议你给link-tag 一个id,比如theme。将 css 文件的名称放在按钮上的 data-attribute 中,并对它们使用相同的处理程序:

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"));

【讨论】:

【参考方案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 />

【讨论】:

【参考方案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>

【讨论】:

【参考方案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');
  
);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

if 和 else if 语句的第一行是完整的答案。剩下的文字只涉及在单击时将图标从月亮更改为太阳,反之亦然。

【讨论】:

以上是关于如何使用 jQuery 切换我的 CSS 样式表?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 获取并设置 CSS 类:对 CSS 元素进行操作

深入学习jQuery样式操作

jQuery CSS 类

jquery如何删除选中的css样式

207 jQuery 样式操作:css (),addClass,removeClass,toggleClass,tab 栏切换案例

jQuery - 获取并设置 CSS 类