如何为夜间模式切换JS添加header、footer目标同步更改配色

• 代码逻辑存在两个明确问题：
  • 重复声明同名的var element变量，后一次赋值会直接覆盖前一次的结果，最终这个变量只会指向最后一次赋值的内容，根本没法同时管控多个元素
  • 浏览器的DOM文档对象没有document.header、document.footer这种内置快捷属性，这两个选择方式完全不被识别，选不到实际的页面元素
• 你原有的实现逻辑是把NightModeToggle类挂在body上做样式切换，完全没必要硬给header、footer单独绑定类，借助CSS的层级选择特性就能实现同步切换，是改动最小、兼容性最好的方案。

方案1：只改CSS，不动原有JS（推荐） #

原有JS本来就会给body元素切换NightModeToggle类，只需要调整CSS的选择规则，让body携带夜间类时，同步控制内部的header、footer样式即可，不需要修改任何JS代码：

/* 保留原有的夜间类通用样式 */
.NightModeToggle {
  background-color: black;
  color: white;
}
/* 新增：当body带夜间类时，同步给header、footer应用相同样式 */
body.NightModeToggle header,
body.NightModeToggle footer {
  background-color: black;
  color: white;
}

这种写法的扩展性很强，后续如果要给其他页面元素追加夜间样式，只需要在CSS选择器里补对应的选择项就行，不用反复修改JS逻辑。

方案2：用JS给多元素单独切类的正确写法 #

如果确实需要给每个目标元素单独挂载NightModeToggle类，JS部分要先用标准DOM选择器拿到对应元素，再逐个触发类切换，不能靠同名变量重复赋值：

function NightModeToggle(){
  // 用标准API选中所有目标元素，过滤掉页面上不存在的元素避免报错
  const targetList = [
    document.body,
    document.querySelector('header'),
    document.querySelector('footer')
  ].filter(el => !!el);
  // 遍历所有目标元素，逐个切换夜间类
  targetList.forEach(el => el.classList.toggle("NightModeToggle"));
}

这种写法对应的CSS就保持原有简单选择器就行，因为类是直接挂在每个目标元素上的：

.NightModeToggle{
  background-color: black;
  color: white;
}

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