如何简化JavaScript中多元素的dark-mode类切换代码？

当然可以简化这段代码，既减少冗余又提升可维护性，给你两种实用方案：

方案一：批量选择元素并统一处理 #

原代码里逐个定义元素变量、重复调用classList.toggle的写法太冗余，可以把所有目标元素的选择器合并，用querySelectorAll一次性获取，再遍历处理：

const themeButton = document.querySelector('.theme');

themeButton.addEventListener('click', () => {
  document.querySelectorAll('header, .mobile, .navbar, .video-container')
    .forEach(element => element.classList.toggle('dark-mode'));
});

这样不用单独定义每个元素的变量，代码更紧凑。

方案二：利用CSS继承（更推荐） #

如果你的项目样式允许，更优的做法是把dark-mode类加到<body>上，然后通过CSS后代选择器来控制所有目标元素的深色模式样式。

CSS 代码示例： #

body.dark-mode header,
body.dark-mode .mobile,
body.dark-mode .navbar,
body.dark-mode .video-container {
  /* 这里写深色模式下的样式，比如背景色、文字颜色等 */
}

对应的JS代码就极简了： #

const themeButton = document.querySelector('.theme');
themeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

这种方法的好处是后续要新增需要切换深色模式的元素时，只需要在CSS里加对应的选择器，不用修改JS代码，扩展性和维护性都更强。

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