如何用JavaScript实现单按钮切换两种背景颜色

嘿，我看到你已经迈出了第一步，现在点击按钮能把背景改成黑色了，就差实现切换回白色的逻辑对吧？其实用if语句就能轻松搞定，我给你两种可行的方案，你可以按需选择：

方案一：直接判断当前背景色（纯JS逻辑） #

修改你的toggle函数，核心思路就是检查当前背景色，然后切换到相反的颜色：

function toggle() {
  const body = document.getElementById("body");
  // 注意：初始时body的style.backgroundColor是空的（因为默认白色是浏览器样式，不是inline style）
  if (body.style.backgroundColor === "black") {
    // 当前是黑色，切换回白色
    body.style.backgroundColor = "white";
  } else {
    // 当前不是黑色（初始状态或白色），切换成黑色
    body.style.backgroundColor = "black";
  }
};

第一次点击时，因为初始style.backgroundColor是空的，会进入else分支把背景改成黑色；第二次点击时，检测到当前是黑色，就切回白色，完美实现切换效果。

方案二：用CSS类切换（更推荐，样式逻辑分离） #

如果以后你想修改深色/浅色的颜色，或者加更多样式（比如文字颜色变化），用CSS类切换会更灵活，不用改动JS代码：

1. 先在light.css里添加两个类：

/* 默认浅色主题 */
.light-theme {
  background-color: white;
  color: black; /* 可选：顺便切换文字颜色，提升可读性 */
}

/* 深色主题 */
.dark-theme {
  background-color: black;
  color: white;
}

2. 给HTML的<body>加上默认的浅色类：

<body id="body" class="light-theme">

3. 然后修改JS的toggle函数：

function toggle() {
  const body = document.getElementById("body");
  // 使用classList.toggle自动切换类名
  body.classList.toggle("dark-theme");
}

这样每次点击按钮，dark-theme类会被添加或移除，自动切换主题样式，以后要改颜色直接修改CSS就行，非常方便。

另外提个小建议：你的HTML里把<label>放在<button>内部不太符合语义规范，建议调整成这样：

<button id="submit">切换主题</button>
<label id="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label>

当然这个不影响功能，只是让HTML结构更合理~

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