JS实现页面背景色与图片切换问题：再次点击仅背景色复原

问题出在你的changeImage函数没有实现切换逻辑——它每次点击都只会把图片设为./public/SwitcherLight.svg，没有处理复原到初始图片的逻辑；同时点击图片时会触发body的点击事件（事件冒泡），导致背景切换的逻辑被触发，但图片却没同步对应状态。

修改后的代码 #

const element = document.querySelector("body")
const newImg = document.getElementById("newImage")
// 保存图片的初始地址和切换目标地址
const originalImgSrc = newImg.src
const lightImgSrc = './public/SwitcherLight.svg'

// 图片点击事件：同步切换背景和图片
newImg.addEventListener('click', function(event) {
    // 阻止事件冒泡，避免触发body的点击事件重复切换背景
    event.stopPropagation()
    // 切换背景的active类，同时获取切换后的状态
    const isActive = element.classList.toggle('active')
    // 根据背景状态同步切换图片
    newImg.src = isActive ? lightImgSrc : originalImgSrc
})

// body点击事件：仅切换背景（如果需要点击body时图片也同步，可添加图片切换逻辑）
element.addEventListener('click', function() {
    element.classList.toggle('active')
    // 可选：点击body时同步切换图片
    // const isActive = element.classList.contains('active')
    // newImg.src = isActive ? lightImgSrc : originalImgSrc
})

关键修改点 #

1. 保存初始图片地址：用originalImgSrc记录图片的初始src，明确复原时要切换回的地址
2. 同步状态切换：利用classList.toggle()的返回值（布尔值，代表切换后body是否有active类），直接关联图片的src切换，保证背景和图片状态完全同步
3. 阻止事件冒泡：点击图片时用event.stopPropagation()避免触发body的点击事件，防止背景被重复切换

补充说明 #

如果希望点击页面任意区域（包括body）时，图片都能和背景同步切换，只需取消body点击事件中图片切换逻辑的注释即可。

内容的提问来源于stack exchange，提问作者Raphaell Arcanjo