使用setAttribute设置class时如何不覆盖暗色模式等已有类

你使用setAttribute('class', index[value])的逻辑是直接覆盖body元素的完整class属性值，会直接清空所有原有类（包括你要保留的dark暗色模式类），这就是功能异常的根源。

推荐使用DOM原生的classList API操作类名，只会增删指定的主题类，不会影响其他已有类，同时补充localStorage存储、初始化读取的逻辑，完整修改代码如下：

修改后的JS代码 #

// 定义主题映射表
const themeMap = {
  chb: "griegos", 
  cj: "romanos", 
  hv: "celtas" 
};
// 提取所有主题类名，用于批量移除旧主题
const allThemeClasses = Object.values(themeMap);

function wow(value) {
  const body = document.getElementById('body');
  // 移除所有旧主题类，不影响dark等其他类
  allThemeClasses.forEach(theme => body.classList.remove(theme));
  // 添加新选中的主题类
  body.classList.add(themeMap[value]);
  // 将选中的主题存入localStorage
  localStorage.setItem('userSelectedTheme', value);
}

// 页面加载时自动读取本地存储的主题配置应用
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('userSelectedTheme');
  if (savedTheme && themeMap[savedTheme]) {
    wow(savedTheme);
    // 同步下拉框选中状态和存储值一致
    document.querySelector('.forminput').value = savedTheme;
  }
})

其他代码说明 #

• 原有CSS代码无需修改
• 原有HTML代码无需修改

如果需要兼容不支持classList的老浏览器，可以用字符串拼接的方式保留dark类：

function wow(value) {
  var index = { 
    chb: "griegos", 
    cj: "romanos", 
    hv: "celtas" 
  };
  const body = document.getElementById('body');
  // 保留原有dark类，替换主题类
  let hasDark = body.className.includes('dark');
  body.className = index[value] + (hasDark ? ' dark' : '');
  localStorage.setItem('userSelectedTheme', value);
}

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