如何在JavaScript中批量更新元素属性？能否精简主题切换代码？

一、无需逐个列属性，批量更新元素属性的方法 #

1. 用Object.assign()直接合并样式对象 #

Object.assign()可以把一个样式对象的所有属性批量赋值给元素的style对象，省去逐个编写属性的麻烦：

const darkStyles = {
  backgroundColor: "var(--darkbg-color)",
  color: "var(--darktxtcolor)",
  border: "1px solid #FFF"
};
// 批量给body设置样式
Object.assign(document.body.style, darkStyles);

2. 封装工具函数批量设置 #

如果需要多次使用批量设置功能，可以写个简单函数循环赋值：

function setElementStyles(element, styles) {
  for (const prop in styles) {
    element.style[prop] = styles[prop];
  }
}
// 使用示例
setElementStyles(document.getElementById('switcher'), {
  backgroundColor: "var(--lightbg-color)",
  color: "var(--lighttxtcolor)"
});

3. 最优方案：用CSS类切换（尤其适合主题场景） #

强烈推荐这种方式，把主题样式定义在CSS类中，只需要给元素添加/移除类就能完成批量样式更新，代码最简洁且易维护：

/* 提前在CSS中定义主题类 */
body.dark {
  background-color: var(--darkbg-color);
  color: var(--darktxtcolor);
}
#switcher.dark {
  background-color: var(--darkbg-color);
  color: var(--darktxtcolor);
  border: 1px solid #FFF;
}
body.light {
  background-color: var(--lightbg-color);
  color: var(--lighttxtcolor);
}
#switcher.light {
  background-color: var(--lightbg-color);
  color: var(--lighttxtcolor);
  border: 1px solid #000;
}

后续JS只需要操作类名，不用再逐个设置style属性。

二、主题切换代码的精简技巧 #

针对你的原有代码，可以从以下几点逐步精简：

1. 缓存DOM元素，避免重复查询 #

原代码多次调用getElementById('switcher')，提前缓存能提升性能并简化代码：

const switcherBtn = document.getElementById('switcher');
switcherBtn.addEventListener('click', (e) => {
  // 后续直接用switcherBtn，无需重复查询DOM
});

2. 用状态变量统一控制，提取重复逻辑 #

把if/else里的重复操作抽离，用状态变量统一判断主题状态：

const switcherBtn = document.getElementById('switcher');
const body = document.body;

switcherBtn.addEventListener('click', () => {
  const isDarkMode = switcherBtn.value === 'Off';
  // 切换按钮的状态值和文本
  switcherBtn.value = isDarkMode ? 'On' : 'Off';
  switcherBtn.textContent = isDarkMode ? 'Dark' : 'Light';
  // 切换主题类
  body.classList.toggle('dark');
  switcherBtn.classList.toggle('dark');
});

3. 结合CSS类的最终精简版本 #

配合前面的CSS类定义，最终JS代码可以精简到极致：

const switcherBtn = document.getElementById('switcher');
const body = document.body;

switcherBtn.addEventListener('click', () => {
  const isDark = switcherBtn.value === 'Off';
  switcherBtn.value = isDark ? 'On' : 'Off';
  switcherBtn.textContent = isDark ? 'Dark' : 'Light';
  body.classList.toggle('dark');
  switcherBtn.classList.toggle('dark');
});

4. 进一步简化：用解构和短路判断 #

如果追求更短的代码，可以用解构获取事件目标，并用三元判断简化赋值：

document.getElementById('switcher').addEventListener('click', ({target}) => {
  const isDark = target.value === 'Off';
  target.value = isDark ? 'On' : 'Off';
  target.textContent = isDark ? 'Dark' : 'Light';
  document.body.classList.toggle('dark');
  target.classList.toggle('dark');
});

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