如何编写jQuery暗黑模式切换函数？样式失效及状态还原求助

嘿，很高兴能帮你搞定这个暗黑模式的问题！我会分两部分来解答你的疑惑：

1. 为什么只有第一个#canvas-wrapper生效？ #

问题出在ID选择器的唯一性上！HTML规范里明确要求一个页面中同一个ID只能出现一次，所以jQuery的$("#canvas-wrapper")只会匹配到页面中第一个带有这个ID的元素，后续的同名ID元素都会被忽略。

如果一定要保留多容器的结构，建议把所有#canvas-wrapper的ID改成class（比如canvas-wrapper），然后用$(".canvas-wrapper")来选中所有这个类的元素。不过我更推荐后面说的全局类切换方案，会更易维护。

2. 实现暗黑模式的开启/关闭（恢复初始样式） #

直接用.css()修改元素样式的最大问题是，你很难“一键恢复”初始状态——毕竟得把每个修改过的样式都重新设回默认值，太繁琐了。更优雅的方式是用CSS类来控制暗黑模式，通过添加/移除全局类来切换样式：

第一步：写好CSS样式 #

先定义默认样式和暗黑模式下的样式，用加在body上的dark-mode全局类来区分：

/* 默认样式（非暗黑模式） */
.canvas-wrapper {
  background: #ffffff; /* 替换成你的初始背景色 */
}
p {
  color: #333333; /* 替换成你的初始文字颜色 */
}

/* 暗黑模式样式 */
body.dark-mode .canvas-wrapper {
  background: #222;
}
body.dark-mode p {
  color: #DDD;
}

第二步：用jQuery切换全局类 #

只需要一行核心代码就能实现切换，而且自动帮你处理“恢复初始状态”的逻辑——移除dark-mode类后，元素就会回到默认样式：

$(function() {
  $(".switch").click(function() {
    // 切换body上的dark-mode类：有就移除，没有就添加
    $("body").toggleClass("dark-mode");
  });
});

为什么这个方案更好？ #

• 易维护：后续新增需要改样式的元素，只需要在CSS里加body.dark-mode 元素选择器的规则就行，不用修改JS代码
• 逻辑清晰：不用手动记录每个元素的初始样式，切换更可靠
• 符合规范：避免了重复ID的问题，同时样式和行为分离，代码更整洁

比如之后你要给标题加暗黑样式，只需要在CSS里加：

body.dark-mode h1 {
  color: #eee;
}

完全不用碰JS，是不是很方便？

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