JavaScript暗黑模式切换时仅一张图片切换问题求助

云上老周

2026-7-8

暗黑模式切换时仅一张图片切换的问题解决

问题原因

你在代码里重复声明了同一个变量imgElement：

var imgElement = document.getElementById("image");
var imgElement = document.getElementById("svg");

后一句会直接覆盖前一句的变量引用，导致你后续操作的imgElement始终指向SVG图片，PNG图片完全没被修改，所以只有SVG会切换版本。

修改方案

给两个图片元素分配不同的变量名，避免覆盖
分别对两个图片的src进行修改
补充初始化逻辑，页面加载时根据本地存储的偏好设置正确的图片版本

修改后的完整代码：

const toggleButton = document.getElementById('toggle-button');
const body = document.body;
// 提前获取两个图片元素，避免重复查询DOM
const imgTask = document.getElementById("image");
const imgLogo = document.getElementById("svg");

// 初始化页面模式和图片状态
function initDarkMode() {
    if (localStorage.getItem('darkMode') === 'enabled') {
        body.classList.add('dark-mode');
        toggleButton.textContent = 'Light';
        imgTask.src = "task2invert.png";
        imgLogo.src = "logoinvert.svg";
    } else {
        toggleButton.textContent = 'Dark';
        imgTask.src = "task2.png";
        imgLogo.src = "logo.svg";
    }
}

// 切换暗黑/明亮模式
function toggleDarkMode() {
    body.classList.toggle('dark-mode');
    const isDarkMode = body.classList.contains('dark-mode');
    
    localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
    toggleButton.textContent = isDarkMode ? 'Light' : 'Dark';
    
    // 分别设置两张图片的src
    imgTask.src = isDarkMode ? "task2invert.png" : "task2.png";
    imgLogo.src = isDarkMode ? "logoinvert.svg" : "logo.svg";
}

// 页面加载时初始化
initDarkMode();