所以我目前对代码还很陌生，对术语的了解也很少，我有点害怕寻求帮助，但就这样吧。
这是我想要完成的: 我目前正在尝试创建一个包含多个页面的网站。我想为设置保留的页面之一，您可以在其中将所有页面的主题更改为夜间或白天模式。我在页面上有一个按钮，当您单击它时，我希望整个网站(每一页)通过阅读我制作的暗模式 css 进入“夜间模式”。如果夜间模式被禁用，我希望它通过阅读我也制作的白天模式 css 进入白天模式。我还想将您的偏好作为 cookie 保存在本地存储中，这样如果用户返回网站，它仍处于用户离开网站时的模式。
我不确定这是否可行，但如果有人能帮助我解决这个问题，那就太棒了，因为我觉得我几乎已经开始工作了，但已经被困了很长时间了!我将添加我的 html、javascript 和两个 css 文件，这样您就可以看到我到目前为止所做的一切。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
</head>
<body class="pagestyle">
<center>
<h1>Veracity</h1>
<h2>Settings</h2>
<div class="navbar">
<a href="Veracity.html">Home</a>
<a href="Articles.html">Articles</a>
<a href="News.html">News</a>
<a href="Pictures.html">Pictures</a>
<a href="ContactUs.html">Contact Us</a>
<a href="NMTP.html">Settings</a>
</div>
<button id="change-theme-btn">Night Mode</button>
<script src="night-mode.js"></script>
</body>
</html>
接下来是 Javascript:
document.getElementById("change-theme-btn").addEventListener("click",
function () {
let darkThemeEnabled = document.body.classList.toggle("pagestyle");
window.localStorage.setItem("pagestyle-enabled", darkThemeEnabled)
});
if (JSON.parse(window.localStorage.getItem("pagestyle-enabled"))) {
document.body.classList.add("pagestyle");
}
最后，这是我的日常/默认 css 文件:
#lightSwitchOff{ display:inline; }
#lightSwitchOn{ display:none; }
#span{
font-family:Times New Roman;
color: black;
font-size: 25px;
}
body {
background-color: white;
}
button {
background-color: teal;
border-radius: 12px;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family:Cooper Black;
}
h1 {
color:teal;
font-size: 60px;
font-family:Magneto;
}
h2 {
color:black;
font-family:Magneto;
}
p {
color:teal;
font-size:20px;
font-family:Courier New;
}
.div{
border:10px solid teal;
width:200px;
border-radius: 10px;
margin:20px;
padding:10px;
}
.navbar {
overflow: hidden;
background-color: #a0a0a0;
font-family: Cooper Black;
}
.navbar a {
float: none;
font-size: 25px;
color: teal;
text-align: center;
padding: 50px 50px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: white;
}
.show {
display: block;
}
这是夜间模式的 CSS 文件:
#lightSwitchOff{ display:none; }
#lightSwitchOn{ display:inline; }
#span{
font-family:Times New Roman;
color: #30d110;
font-size: 25px;
}
body {
background-color: black;
}
button {
background-color: #30d110;
color: black;
border-radius: 12px;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family:Cooper Black;
}
h1 {
color:#30d110;
font-size: 60px;
font-family:Magneto;
}
h2 {
color:white;
font-family:Magneto;
}
p {
color:#30d110;
font-size:20px;
font-family:Courier New;
}
body {
background-color: black;
}
.div{
border:10px solid #30d110;
width:200px;
border-radius: 10px;
margin:20px;
padding:10px;
}
.navbar {
overflow: hidden;
background-color: #a0a0a0;
font-family: Cooper Black;
}
.navbar a {
float: none;
font-size: 25px;
color: #30d110;
text-align: center;
padding: 50px 50px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: white;
}
.show {
display: block;
}
我不知道我发布的代码太多还是太少，但就像我说的，我是新手，希望提供尽可能多的信息。我想我真的很接近，但我一辈子都想不出一种方法来用一个按钮切换 css 文件，并让切换发生在我网站上的所有页面上。任何建议表示赞赏，如果我遗漏了任何其他有助于得到答案的东西，请告诉我，我可以尽力提供帮助!非常感谢!
最佳答案
如果 css 文件是分开的，那么听起来您应该希望 Javascript 在运行时动态链接正确的 CSS 文件。如果可能，您应该将状态单独保存在 Javascript 中，而不是依赖于 HTML:
// defaults to false when LS not populated
let darkEnabled = Boolean(localStorage.darkEnabled);
const cssElem = document.querySelector('link[rel="stylesheet"]');
if (!darkEnabled) cssElem.href = 'default.css';
else cssElem.href = 'darktheme.css';
document.getElementById("change-theme-btn")
.addEventListener('click', function () {
darkEnabled = !darkEnabled;
localStorage.darkEnabled = darkEnabled;
if (!darkEnabled) cssElem.href = 'default.css';
else cssElem.href = 'darktheme.css';
});
(假设您将深色 CSS 文件命名为 darktheme.css)
关于javascript - 我如何获得一个按钮来更改样式表、保存到本地存储并出现在网站的所有页面上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49827781/