gpt4 book ai didi

javascript - 如何使用单个脚本更改多个元素的样式?

转载 作者:行者123 更新时间:2023-11-28 05:10:57 25 4
gpt4 key购买 nike

所以基本上我想为我的网站制作一个暗模式切换器。我有一个小脚本开始。它基本上切换 CSS 样式。但如果我离开或刷新页面,样式将不会明显保留...

<style>
.mystyle {
color:red !important;
background-color: black !important;
}

</style>
<script>
function init(){
var element = document.body;
element.classList.toggle("mystyle");
}
</script>

所以我的目标是让这个切换按钮在整个站点中保持当前状态,即使在刷新或更改页面后也是如此......

最佳答案

一个简单的方法是将状态保存在 localStorage 中,并在加载页面时根据其值切换类。

以下是您可以如何实现它:

<style>
.dark-mode {
color: red;
background-color: black;
}
</style>

<body>
<button onclick="toggleMode()">Switch Mode</button>
</body>

<script>
const body = document.body;

if (localStorage.mode === 'dark') {
body.classList.add("dark-mode")
};

function toggleMode() {
body.classList.toggle("dark-mode");
localStorage.setItem(
'mode', localStorage.mode === 'light' || localStorage.mode === undefined ? 'dark' : 'light'
);
}
</script>

关于javascript - 如何使用单个脚本更改多个元素的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56119517/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com