我有这段 javascript 代码可以更改网站的样式。但此代码仅在您单击它时更改样式。刷新页面后，它会恢复默认状态。我希望它保存用户的偏好。我真的很喜欢这段代码，我不想用另一段代码来改变它。你能帮忙吗？我希望你在添加cookies代码后给我代码!
$(document).ready(function() {
$("#fullswitch").click(function() {
$("#chpheader").removeClass("compact");
$("#imgg").removeClass("compact");
$("#chpheader").removeClass("original");
$("#imgg").removeClass("original");
$("#chpheader").addClass("normal");
$("#imgg").addClass("normal");
});
$("#compactswitch").click(function() {
$("#chpheader").addClass("compact");
$("#imgg").addClass("compact");
$("#chpheader").removeClass("original");
$("#imgg").removeClass("original");
$("#chpheader").removeClass("normal");
$("#imgg").removeClass("normal");
});
$("#originalswitch").click(function() {
$("#chpheader").addClass("original");
$("#imgg").addClass("original");
$("#chpheader").removeClass("compact");
$("#imgg").removeClass("compact");
$("#chpheader").removeClass("normal");
$("#imgg").removeClass("normal");
});
});
最佳答案
你做错了。您应该向顶级元素添加一个类，例如根 ( <html> )，并根据该元素设置文档其余部分的样式。
.style1-p {
background: blue;
}
.style1-div {
background: red;
}
应该变成
.style1 p {
background-blue;
}
.style1 div {
background-red;
}
这样，你只需要改变一个类，整个文档就会改变。这也意味着您只需要保存一个 cookie(描述该类)，并且仅加载一次。
jsFiddle Example
编辑:jsFiddle 示例已更新以包含 Cookie。
EDIT2:jsFiddle 示例已更新以包含多种样式!
关于javascript cookie 保存和加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7049442/