个人中心
gpt4 book ai didi

javascript - 我如何获得一个按钮来更改样式表、保存到本地存储并出现在网站的所有页面上？

转载 作者：行者123 更新时间：2023-11-30 11:21:00 26 4
gpt4 key购买 nike

所以我目前对代码还很陌生，对术语的了解也很少，我有点害怕寻求帮助，但就这样吧。

这是我想要完成的:我目前正在尝试创建一个包含多个页面的网站。我想为设置保留的页面之一，您可以在其中将所有页面的主题更改为夜间或白天模式。我在页面上有一个按钮，当您单击它时，我希望整个网站(每一页)通过阅读我制作的暗模式 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/

26 4 0
文章推荐： javascript - 使用 Node - AdWords 获取刷新 token
文章推荐： java - 错误 : Could not find or load main class after adding dependency (maven)
文章推荐： java - 如何绑定(bind) JSP 页面和 Controller 的 session 范围字段？
文章推荐： java - Db4o 返回缓存对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com