页面刷新后如何取消刷新开关按钮？

Question

当我切换到另一章时，我需要有关如何取消切换按钮的刷新 position 的建议。

js主题切换代码：

document.addEventListener('DOMContentLoaded', () => {
if(localStorage.darkTheme === 'true'){
    document.body.classList.add('dark');
}
else{document.body.classList.remove('dark');};
const themeSwitch = document.getElementById('themeCheckBox');
themeSwitch.addEventListener('change', () => {    
    if (document.body.classList.contains('dark')){
        localStorage.darkTheme = 'false';
    }else { localStorage.darkTheme = 'true';};
    document.body.classList.toggle('dark');  
});

Answer 1

您的 javascript 代码应该像这样更改。 您在触发DOMContentLoaded事件后设置了复选框的值。 并根据复选框值add或remove class。

document.addEventListener('DOMContentLoaded', () => {
    const themeSwitch = document.getElementById('themeCheckBox');

    if(localStorage.darkTheme === 'true'){
        document.body.classList.add('dark');
        themeSwitch.checked = true;
    } else{
        document.body.classList.remove('dark');
        themeSwitch.checked = false;
    }

    themeSwitch.addEventListener('change', () => {    
        if (themeSwitch.checked){
            localStorage.darkTheme = 'true';
            document.body.classList.add('dark');
        } else {
            localStorage.darkTheme = 'false';
            document.body.classList.remove('dark');
        }  
    });
});