使用 jquery.cookie.js 切换样式表并记住它答案

【问题标题】：Switch stylesheets and remember it using jquery.cookie.js使用 jquery.cookie.js 切换样式表并记住它
【发布时间】：2023-03-17 14:06:02
【问题描述】：

之前可能已经有人问过了，但我还没有找到任何有用或完整的答案。我们如何切换样式表并将已选择的样式表保存在 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">

【问题讨论】：

标签： jquery css html cookies local-storage

【解决方案1】：

只需使用 jQuery 创建<link> 元素，从localStorage 读取颜色，并将其附加到<head>：

var styleColor = localStorage.styleColor || "black"; // Using "black" as default
$("<link>", {
    rel: "stylesheet",
    href: "styles/" + styleColor + ".css"
}).appendTo("head");

如果您想热交换样式表，这会变得很棘手。然后，您需要找到 <link> 元素并将其删除，然后将其替换为您想要的元素。我什至不确定这是否可行。

但是，我可以建议一个替代方案吗？最好有一个样式表，然后使用类来选择主题。在<html> 元素上设置主题类，并根据主题定义您的样式。

例如，假设您的正文背景颜色随主题而变化。然后你可以像这样定义你的样式：

.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());

【讨论】：

感谢您的回复。您的选择还不错，但对于那些需要重建现有样式表的人（包括我）来说，这将是一项令人筋疲力尽的工作。我有很多元素，因此为每个元素键入类在它前面需要很多时间。所以我对切换样式表更感兴趣。你能为你的第一个建议或使用 jcookie 提供一个例子吗？谢谢。
@Eddi - 我不确定你在问什么...如何使用 jcookie 而不是 localStorage？
好吧，据我所知，您可以将语句/类保存在本地存储中（直接在浏览器中，不需要 jquery 插件）或包含一个像 github.com/carhartl/ 这样的插件jquery-cookie。正如我所说，如果我错了，我深表歉意。