如何使用jQuery的toggle方法实现网站暗黑模式并切换头部背景色？

问题描述 #

我正在尝试使用jQuery的toggle方法为网站开发暗黑模式功能。当前点击切换控件时，页面body的颜色会发生变化，但我希望头部（header）的背景色也能同步切换，请问该如何实现？现有代码如下：

$(document).ready(function(){ 
  $('#checkbox').click(function(){ 
    var element = document.body; 
    element.classList.toggle("dark"); 
  }); 
}); 

要求必须使用jQuery实现，后续可能还要扩展到其他元素的样式切换。

解决方案 #

这问题我之前也碰到过，其实不用纠结原生的classList，jQuery本身提供的toggleClass方法天生支持批量操作元素，完美适配你的需求。

步骤1：准备CSS样式

首先确保你已经为浅色/暗黑模式写好了对应的样式，比如：

/* 默认浅色模式 */
body {
  background-color: #ffffff;
  color: #333333;
}
header {
  background-color: #f5f5f5;
}

/* 暗黑模式样式 */
body.dark {
  background-color: #1a1a1a;
  color: #ffffff;
}
header.dark {
  background-color: #2d2d2d;
}

步骤2：修改jQuery代码

直接用jQuery选择器选中body和header，调用toggleClass方法即可同步切换类：

$(document).ready(function(){ 
  $('#checkbox').click(function(){ 
    // 同时给body和header切换dark类
    $('body, header').toggleClass('dark');
  }); 
});

扩展：支持更多元素

如果后续需要给其他元素（比如导航栏、侧边栏）也加暗黑模式，只需要在选择器里添加对应的元素即可：

$(document).ready(function(){ 
  // 把所有需要切换暗黑模式的元素放在选择器里
  const darkModeElements = $('body, header, .navbar, .sidebar');
  
  $('#checkbox').click(function(){ 
    darkModeElements.toggleClass('dark');
  }); 
});

为什么这样可行？ #

jQuery的toggleClass方法会自动遍历所有匹配到的元素，逐个添加或移除指定的类——相当于把你原来操作单个元素的逻辑，批量应用到了多个元素上。而且写法比原生的classList.toggle更简洁，特别适合这种需要同步切换多个元素样式的场景。

注意：如果你的header有特定的class或id（比如<header id="site-header">），记得把选择器改成$('#site-header')，确保能准确选中目标元素。

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