切换按钮点击后卡片背景色无法更改的问题求助（附代码）

嘿，我一眼就瞅到你代码里的问题了——JavaScript部分获取卡片元素的方式不对，而且没考虑到可能有多个卡片的情况，这才导致切换按钮点了没反应。

具体错误点： #

• 你写的 document.class('.card') 完全是错误语法！JavaScript里根本没有 document.class() 这个方法，正确获取所有卡片元素的方式应该是 document.querySelectorAll('.card') 或者 document.getElementsByClassName('card')。
• 就算你获取到了卡片元素，querySelectorAll 返回的是节点列表（NodeList），不是单个DOM元素，直接调用 classList.toggle 会报错，得遍历每个卡片来操作。

修正后的JavaScript代码： #

function myFunction() {
  // 切换body的深色模式类
  const bodyElement = document.body;
  bodyElement.classList.toggle('dark-mode');
  
  // 获取所有卡片元素
  const cardElements = document.querySelectorAll('.card');
  
  // 遍历每个卡片，切换dark-box类
  cardElements.forEach(card => {
    card.classList.toggle('dark-box');
  });
}

额外优化建议： #

• 确保CSS里 .dark-box 的样式优先级足够覆盖 .box，比如把 .dark-box 写在 .box 样式的后面，或者用更具体的选择器（比如 .dark-mode .card.dark-box）。
• 也可以用CSS变量来管理主题色，这样切换逻辑更简洁：

:root {
  --card-bg: hsl(227, 47%, 96%);
}

.dark-mode {
  --card-bg: hsl(228, 28%, 20%);
}

.box {
  background-color: var(--card-bg);
}

这种情况下，JS只需要切换body的 dark-mode 类，卡片背景色会自动跟着变化，不用再单独操作卡片的类。

内容的提问来源于stack exchange，提问作者supernal-hades