Question

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

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

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

1 个答案: