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

Question

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

我正在做的事情很简单。

您单击一个按钮(id="themes")，它会打开一个(id="themedrop")向下滑动的div 并列出主题。（此时我只有两个）

<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（注意：文件在同一目录中）

任何帮助将非常感激。

Answer 1

$('#grayscale').click(function (){    $('link[href="style1.css"]').attr('href','style2.css');});$('#original').click(function (){    $('link[href="style2.css"]').attr('href','style1.css');});尝试一下，但不确定它是否会起作用我没有测试过，但运气好。

Answer 2

我建议你给link-tag一个id如主题。将css文件的名称data放在按钮上的-attribute中，并对它们使用相同的处理程序：HTML：<link&nbsp;id="theme"&nbsp;rel="stylesheet"&nbsp;href="style1.css"><button&nbsp;id="grayscale"&nbsp;data-theme="style2.css">Gray&nbsp;Theme</button>和js：$("button[data-theme]").click(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$("head&nbsp;link#theme").attr("href",&nbsp;$(this).data("theme"));}

Answer 3

快速的方法是，<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 />