可能之前已经有人问过，但我还没有找到任何有用或完整的答案。我们如何切换样式表并将已选择的样式表保存在 jQuery cookie 或本地存储中？
所以我在同一个文件夹中有大约 5 个样式表。所以我认为我不必将它们全部键入我的 html 文件中，对吗？谢谢。
<link href="styles/black.css" rel="stylesheet" type="text/css" title="black">
<link href="styles/blue.css" rel="stylesheet" type="text/css" title="blue">
<link href="styles/green.css" rel="stylesheet" type="text/css" title="green">
<link href="styles/red.css" rel="stylesheet" type="text/css" title="red">
<link href="styles/yellow.css" rel="stylesheet" type="text/css" title="yellow">
最佳答案
只需创建 <link>使用 jQuery 的元素，从 localStorage 中读取颜色, 并将其附加到 <head> :
var styleColor = localStorage.styleColor || "black"; // Using "black" as default
$("<link>", {
rel: "stylesheet",
href: "styles/" + styleColor + ".css"
}).appendTo("head");
如果您想热交换样式表，这会变得很棘手。然后你需要找到 <link>元素并将其删除，然后将其替换为您想要的元素。我什至不确定这是否可行。
但是，我可以建议一个替代方案吗？最好有一个样式表，然后使用类来选择主题。在 <html> 上设置主题类元素，并根据主题定义您的样式。
例如，假设您的 body 背景颜色根据主题而变化。然后你可以像这样定义你的样式:
.red body { background-color: red; }
.blue body { background-color: blue; }
那么改变主题就像调用这个函数一样简单，传入主题名称:
function loadTheme(theme) {
$("html").removeClass("red blue").addClass(theme);
}
然后，使用localStorage几个实用函数:
function saveTheme(theme) {
localStorage.theme = theme;
}
function getTheme() {
return localStorage.theme || "black";
}
甚至不要使用 document.ready加载主题。您希望样式表在内容之前加载。从 <head> 中的脚本元素调用它:
loadTheme(getTheme());
关于jquery - 切换样式表并使用 jquery.cookie.js 记住它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27490939/