JavaScript切换CSS类失效问题（light/dark mode）

问题描述 #

我在网页上实现了明暗模式切换功能，切换按钮是一张图片，点击后本应改变页面背景色、文字色及图片背景色等内容。点击图片会调用JavaScript函数，为需要修改的元素切换CSS类。最初我为每个元素单独编写函数实现切换，功能正常，但为了简化代码，我让所有需要切换的元素共享light-mode类，希望用一个函数完成所有元素的类切换，现在代码却无法正常工作。页面中其他脚本可正常运行，说明.js文件链接无误。

原代码如下：

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
    <span class="light-switch-span">
      <img class="light-switch light-mode" src="idea.png" onclick="lightMode()">
    </span>
    <script src="myScript.js"></script>
    <div class="photo-div">
      <img class="photo light-mode" src="img.png">
    </div>
  </body>
</html>

（注：原HTML存在多余的闭合</div>，已修正）

原CSS代码 #

/* CSS */

body {
    margin: 0;
    font-family: 'Poppins';
    background-color: black;
    color: white;
}

body.light-dark {
    background-color: white;
    color: black;
    transition: 0.5s;
}

.light-switch-span {
    padding: 0;
}

.light-switch {
    width: 2.5%;
    height: auto;
    position: absolute;
    right: 0%;
    object-fit: contain;
    margin-right: 5%;
    transition: filter .5s ease-in-out;
}

.light-switch.light-dark {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.photo {
    object-fit: contain;
    height: auto;
    width: 100%;
    border: 10px solid;
    border-radius: 50%;
    background-color: white;
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.photo.light-dark {
    background-color: black;
}

原JavaScript代码 #

// JavaScript

function lightMode() {
    var all = document.querySelector(".light-mode");
    for(var i = 0; i < all.length; i++) {
        element.classList.toggle("light-dark");  
    }
}

错误分析 #

1. 选择器使用错误：document.querySelector(".light-mode")只会返回第一个匹配该类的元素，无法获取所有带light-mode类的元素，应该使用document.querySelectorAll(".light-mode")来获取所有匹配元素的集合。
2. 未定义变量：循环中使用了未声明的element变量，正确应该是all[i]来访问集合中的每个元素。
3. 类名逻辑混淆：默认body样式是深色模式，但类名light-mode被标记在默认状态的元素上，而切换的类是light-dark，命名逻辑颠倒，容易导致后续维护混乱。

修复后的代码 #

修复后的JavaScript #

function lightMode() {
    // 获取所有带light-mode类的元素
    var allElements = document.querySelectorAll(".light-mode");
    // 遍历每个元素切换light-dark类
    for(var i = 0; i < allElements.length; i++) {
        allElements[i].classList.toggle("light-dark");  
    }
}

可选：修正类名逻辑（提升可读性） #

如果要让类名更直观，可以把默认状态设为dark-mode，切换到light-mode，调整后的CSS和JS如下：

调整后的CSS

body {
    margin: 0;
    font-family: 'Poppins';
    /* 默认深色模式 */
    background-color: black;
    color: white;
    transition: 0.5s;
}

body.light-mode {
    background-color: white;
    color: black;
}

.light-switch {
    width: 2.5%;
    height: auto;
    position: absolute;
    right: 0%;
    object-fit: contain;
    margin-right: 5%;
    transition: filter .5s ease-in-out;
    /* 默认深色模式下的滤镜 */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

body.light-mode .light-switch {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.photo {
    object-fit: contain;
    height: auto;
    width: 100%;
    border: 10px solid;
    border-radius: 50%;
    background-color: white;
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

body.light-mode .photo {
    background-color: black;
}

调整后的HTML（无需给每个元素加light-mode类）

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <span class="light-switch-span">
      <img class="light-switch" src="idea.png" onclick="toggleMode()">
    </span>
    <script src="myScript.js"></script>
    <div class="photo-div">
      <img class="photo" src="img.png">
    </div>
  </body>
</html>

调整后的JavaScript

function toggleMode() {
    // 只需要切换body的类，通过CSS后代选择器控制所有元素样式
    document.body.classList.toggle("light-mode");
}

更优实现方案 #

1. 使用body类控制全局：不需要给每个元素单独加切换类，通过body.light-mode的后代选择器统一控制所有需要切换的元素样式，大幅简化代码。
2. 记住用户偏好：使用localStorage保存用户选择的模式，页面刷新后自动恢复：

// 页面加载时恢复用户偏好
window.addEventListener('DOMContentLoaded', () => {
    const savedMode = localStorage.getItem('themeMode');
    if (savedMode === 'light') {
        document.body.classList.add('light-mode');
    }
});

function toggleMode() {
    const isLight = document.body.classList.toggle('light-mode');
    // 保存到localStorage
    localStorage.setItem('themeMode', isLight ? 'light' : 'dark');
}

3. 替换内联事件监听：用JavaScript绑定事件代替HTML内联onclick，符合分离原则：

window.addEventListener('DOMContentLoaded', () => {
    const switchBtn = document.querySelector('.light-switch');
    switchBtn.addEventListener('click', toggleMode);
    
    // 恢复用户偏好
    const savedMode = localStorage.getItem('themeMode');
    if (savedMode === 'light') {
        document.body.classList.add('light-mode');
    }
});

function toggleMode() {
    const isLight = document.body.classList.toggle('light-mode');
    localStorage.setItem('themeMode', isLight ? 'light' : 'dark');
}

内容的提问来源于stack exchange，提问作者Jared Robertson