如何使用 jQuery 切换 CSS 样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7846980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I switch my CSS stylesheet using jQuery?
提问by Michael Schwartz
What I'm working on is simple.
我正在做的事情很简单。
You click on a button (id="themes")and it opens up a div (id="themedrop")that slides down and lists the themes. (I only have two at this point)
您单击一个按钮(id="themes")，它会打开一个(id="themedrop")向下滑动并列出主题的 div 。（此时我只有两个）
<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>
Now when the site is loaded it loads with style1.css (main/original theme)
现在，当网站加载时，它会加载 style1.css（主/原始主题）
<link rel="stylesheet" type="text/css" href="style1.css">
Now what I'm trying to figure out is... How can I have it that when the grayscale button is clicked to change the stylesheet from style1.css to style2.css (note: files are in the same directory)
现在我想弄清楚的是......我怎么能在点击灰度按钮将样式表从 style1.css 更改为 style2.css 时（注意：文件在同一目录中）
Any help would be much appreciated.
任何帮助将非常感激。
回答by Val
$('#grayscale').click(function (){
$('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
$('link[href="style2.css"]').attr('href','style1.css');
});
Give this a try but not sure if it will work I have not tested it but gd luck.
试试这个，但不确定它是否会起作用我还没有测试过，但幸运的是。
回答by Tetaxa
I would suggest you give the link-tag an id such as theme. Put the name of the css file in a data-attribute on the buttons and use the same handler on them both:
我建议你给link-tag 一个 id，比如主题。将 css 文件的名称data放在按钮上的 -attribute 中，并对它们使用相同的处理程序：
Html:
网址：
<link id="theme" rel="stylesheet" href="style1.css">
<button id="grayscale" data-theme="style2.css">Gray Theme</button>
And js:
和js：
$("button[data-theme]").click(function() {
$("head link#theme").attr("href", $(this).data("theme"));
}
回答by none
You can try to do that by this way:
您可以尝试通过以下方式做到这一点：
<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 />
回答by none
Use this :
用这个 ：
<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>
