暗黑/亮色主题切换时JS无法切换图片滤镜问题求助

问题说明 #

需要在暗黑/亮色主题切换时，通过JavaScript给目标PNG图片添加/移除dark-img类，配合CSS的filter: invert(100%)实现图片反转。手动修改class时CSS生效，但自行添加的JS代码导致整个主题切换功能失效，原JS对body和图标的控制是正常的。

相关代码 #

HTML #

<img src="assets/img/willpower_logo.png" alt="" class="about__img">

CSS #

/*========== Variables Dark theme ==========*/
body.dark-theme{
  /*--HSL Color Mode*/
  --first-color-second: hsl(var(--hue-color), 30%, 8%);
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: hsl(var(--hue-color), 28%, 12%);
  --container-color: hsl(var(--hue-color), 29%, 16%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

img.about__img.dark-img{
  filter: invert(100%);
}

/*========== Button Dark/Light ==========*/
.nav__btns{
  display: flex;
  align-items: center;
}

.change-theme{
  font-size: 1.25rem;
  color: var(--title-color);
  margin-right: var(--mb-1);
  cursor: pointer;
}

.change-theme:hover{
  color: var(--first-color);
}

原正常工作的JS代码 #

const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'

// 读取之前用户选择的主题
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

// 获取当前主题状态
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun'

// 初始化用户之前选择的主题
if (selectedTheme) {
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme)
}

// 主题切换按钮点击事件
themeButton.addEventListener('click', () => {
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    // 保存当前选择到本地存储
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

修改后失效的JS代码 #

/*==================== DARK LIGHT THEME ====================*/ 
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'
const imgTheme = 'dark-img'

// 读取之前用户选择的内容
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
const selectedImg = localStorage.getItem('selected-img')

// 获取当前状态
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun'
const getCurrentImg = () => document.img.classList.contains(dark-img) ? 'dark' : 'light'

// 初始化用户之前选择的主题
if (selectedTheme) {
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme)
  document.img.about__img.classList[selectedImg === 'dark' ? 'add' : 'remove'](imgTheme)

// 主题切换按钮点击事件
themeButton.addEventListener('click', () => {
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    document.img.classList.contains(dark-img)
    // 保存当前选择到本地存储
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
    localStorage.setItem('sected-img', getCurrentImg())
})

错误分析 #

1. DOM选择错误：document.img不是合法的DOM选择方式，必须用document.querySelector()或document.getElementById()获取图片元素。
2. 变量与字符串混淆：dark-img是字符串类名，应该用定义好的imgTheme变量替代，且dark-img不能作为变量名（含连字符）。
3. 语法错误：if (selectedTheme)代码块缺少闭合的}，导致JS解析失败。
4. 拼写错误：localStorage.setItem('sected-img', ...)中的sected-img应为selected-img。
5. 逻辑错误：getCurrentImg函数中检查的对象和类名均不正确，应该基于目标图片元素判断。

修正后的完整JS代码 #

/*==================== DARK LIGHT THEME ====================*/ 
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'
const imgTheme = 'dark-img'
// 获取目标图片元素
const targetImg = document.querySelector('img.about__img')

// 从本地存储读取之前的选择
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
const selectedImg = localStorage.getItem('selected-img')

// 获取当前状态的函数
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun'
const getCurrentImg = () => targetImg.classList.contains(imgTheme) ? 'dark' : 'light'

// 初始化之前的选择状态
if (selectedTheme) {
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme)
  // 初始化图片类名
  if (selectedImg) {
    targetImg.classList[selectedImg === 'dark' ? 'add' : 'remove'](imgTheme)
  }
}

// 主题切换按钮点击事件
themeButton.addEventListener('click', () => {
    // 切换body和图标主题
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    // 同步切换图片类名
    targetImg.classList.toggle(imgTheme)
    
    // 保存当前选择到本地存储
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
    localStorage.setItem('selected-img', getCurrentImg())
})

关键修改点 #

• 提前用document.querySelector('img.about__img')获取目标图片元素，避免重复选择。
• 修复getCurrentImg函数的判断逻辑，基于目标图片元素检查类名。
• 补全if (selectedTheme)代码块的闭合大括号。
• 修正本地存储的键名拼写错误。
• 点击事件中用toggle方法直接切换图片的类名，逻辑更简洁。

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