Javascript 通过添加cookie切换CSS样式表_Javascript_Html_Css

Javascript 通过添加cookie切换CSS样式表

javascript html css

Javascript 通过添加cookie切换CSS样式表,javascript,html,css,Javascript,Html,Css,我正在使用的代码工作得很好，但在网站上导航时它不会粘住——因为它需要触发cookie——有什么方法可以做到这一点吗？以下是我使用的全部代码： <!DOCTYPE html> <html> <head> <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> <script&

我正在使用的代码工作得很好，但在网站上导航时它不会粘住——因为它需要触发cookie——有什么方法可以做到这一点吗？以下是我使用的全部代码：

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>


功能交换样式表（表）{
document.getElementById（'pagestyle'）.setAttribute（'href'，sheet）；
}
Javascript更改样式表而不重新加载页面
深色样式表
蓝色样式表
默认样式表

Nathaniel在他的评论中说JS在页面加载后执行是正确的，因此如果在页面加载后应用样式，您会看到明显的闪烁

然而，为了回答您的问题，您可以使用一些非常简单的javascript获取/设置cookie

函数setCookie（名称、值、天数）
{
var d=新日期（）；
d、 设置时间（d.getTime（）+天*24*60*60*1000）；
document.cookie=name+“=”+value+“；expires=“+d.toutString（）+”；path=/”；
}
函数getCookie（名称）
{
var cookies=document.cookie.split（“；”）；
对于（变量i=0；i}

您需要能够在服务器端添加类，以便在加载页面和类时不会出现flash。我假设您正在覆盖默认样式，而不是替换它？是的，我已经将样式表添加到我的服务器中-该部分已设置完毕。当按钮提示时，不会闪烁任何内容。它们看起来很棒。但是当你刷新页面时，它们不会粘住，因为不会触发JS cookies。不知道该怎么做。不，我的意思是不只是css文件，而是在DOM中加载html之前必须将类添加到视图中。这是你不想用cookies运行的，cookies提供的信息太晚了。嘿，Dave，我在-不起作用的兄弟：/setCookie函数中添加了什么值？我没有，我只是复制并粘贴在头上的第一个函数下面你必须实际调用函数。请参阅我的编辑。我把它放在你的代码里。试图复制并通过这里，但它说评论太长了-哎