我见过许多解决方案，但我就是不知道如何使它们起作用。这是我的代码。
const modeButton = document.getElementById('light-dark-btn');
const metroButton = document.getElementById('metro-button');
const body = document.body;
const slider = document.getElementsByClassName('slider');
modeButton.addEventListener('click', ()=> {
let bgColor = document.body.style.backgroundColor
if(bgColor == 'rgb(230, 230, 230)' || !bgColor){
document.body.style.backgroundColor = 'rgb(18,18,18)';
document.body.style.color = 'rgb(230,230,230)';
document.cookie = "darkMode=true";
}else if(bgColor == 'rgb(18, 18, 18)'){
document.body.style.backgroundColor = 'rgb(230,230,230)';
document.body.style.color = 'rgb(0,0,0)';
document.cookie = "darkMode=false";
}
})
body.addEventListener('load', ()=> {
var darkMode = getCookie("darkMode");
if(darkMode == "true"){
body.style.backgroundColor = "rgb(18, 18, 18)";
}
if(darkMode == "false"){
body.style.backgroundColor = "rgb(230, 230, 230)";
}
})
试图使复选框按钮的状态在更改页面时保持不变。
您没有说明如何将脚本加载到页面中，但是为主体的加载事件设置事件侦听器是很棘手的。下面是一个例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onBodyLoadFromAttr () {
console.log('bodyload-fromAttr')
}
console.log('setting bodyload1');
// never actually executes:
document.body.addEventListener('load', ()=>console.log('bodyload1'));
</script>
</head>
<body onload="onBodyLoadFromAttr()">
<script type="text/javascript">
console.log('setting bodyload2');
// never actually executes:
document.body.addEventListener('load', ()=>console.log('bodyload2'));
</script>
</body>
<script type="text/javascript">
console.log('setting bodyload3');
// never actually executes:
document.body.addEventListener('load', ()=>console.log('bodyload3'));
</script>
</html>
在四个事件侦听器中，只有使用onloadattr的一组将实际触发。更好的方法是使用document.readyState和DOMContentLoaded事件，如下所示:
if (document.readyState !== 'loading') {
setBodyColor();
} else {
document.addEventListener('DOMContentLoaded', setBodyColor);
}
另一个可能的问题是cookie。您没有包含getCookie函数，但是一般来说，cookie可能很麻烦，处理起来很麻烦(API并不简单，cookie可能被禁用，扩展可能会干扰它们，等等)。如果您不需要在每个请求时都将数据发送到服务器，就像用户的颜色偏好一样，那么通常最好使用localStorage:
const modeButton = document.getElementById('light-dark-btn');
const body = document.body;
modeButton.addEventListener('click', () => {
let darkMode = localStorage.getItem('darkMode');
console.log({ oldDarkMode: darkMode })
localStorage.setItem('darkMode', darkMode !== 'true');
console.log({ newDarkMode: localStorage.getItem('darkMode') })
setBodyColor();
});
function setBodyColor () {
if (localStorage.getItem('darkMode') === 'true') {
body.style.backgroundColor = 'rgb(18, 18, 18)';
document.body.style.color = 'rgb(230,230,230)';
} else {
body.style.backgroundColor = 'rgb(230, 230, 230)';
document.body.style.color = 'rgb(0,0,0)';
}
}
if (document.readyState !== 'loading') {
setBodyColor();
} else {
document.addEventListener('DOMContentLoaded', setBodyColor);
}