如何通过 JavaScript 动态检测并切换 CSS 背景颜色-html教程

本文详解如何在 javascript 中准确读取元素当前背景色，并实现基于真实样式值的双向切换逻辑，避免因变量作用域或颜色格式不匹配导致的失效问题。

在前端开发中，仅靠 element.style.backgroundColor 无法可靠获取通过 CSS 类设置的背景色（它只返回内联样式），必须使用 window.getComputedStyle() 获取计算后的真实值。但需注意：浏览器返回的 background-color 通常是 rgb(r, g, b) 格式（如 rgb(34, 35, 39)），而非原始十六进制 #222327，直接字符串比对会失败。

以下是一个健壮、可复用的解决方案：

✅ 正确做法：基于计算样式 + 颜色标准化比对

function changeBgC() {
  const body = document.body;
  const computedStyle = window.getComputedStyle(body);
  const bgColor = computedStyle.backgroundColor;

  // 将 rgb(r, g, b) 或 rgba(...) 转为十六进制（支持透明度忽略）
  function rgbToHex(color) {
    const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    if (!match) return null;
    const [_, r, g, b] = match;
    return "#" + ((1 << 24) + (+r << 16) + (+g << 8) + +b).toString(16).slice(1).toUpperCase();
  }

  const hexColor = rgbToHex(bgColor);

  if (hexColor === "#222327") {
    body.style.backgroundColor = "#29FD53";
  } else if (hexColor === "#29FD53") {
    body.style.backgroundColor = "#222327";
  }
}

⚠️ 常见错误与修复说明

• ❌ 错误1：i 变量作用域错误
  如问题中所示，将 let i = 0 写在函数内部会导致每次点击都重置为 0，无法记忆状态。✅ 正确方式是将其声明在函数外部（模块级作用域）：

  let toggleState = false; // 更语义化的布尔状态
  function changeBgC() {
    document.body.style.backgroundColor = 
      toggleState ? "#222327" : "#29FD53";
    toggleState = !toggleState;
  }

  ✅ 推荐使用布尔状态而非计数器，更简洁、不易出错。

• ❌ 错误2：选择器错误
  原代码中 document.querySelector(‘.body’) 尝试查找 class=”body” 的元素，但实际目标是

  标签本身。应使用 document.body 或 document.querySelector(‘body’)。

• ❌ 错误3：忽略颜色格式差异
  CSS 中写的 #222327 经浏览器解析后返回 rgb(34, 35, 39)，直接 === “#222327” 永远为 false。务必统一格式再比对。

? 进阶建议：CSS 自定义属性（推荐现代方案）

利用 CSS 变量可彻底解耦样式与逻辑，提升可维护性：

:root {
  --bg-primary: #222327;
  --bg-accent: #29FD53;
}
body {
  background-color: var(--bg-primary);
}

function changeBgC() {
  const root = document.documentElement;
  const current = getComputedStyle(root).getPropertyValue('--bg-primary').trim();
  if (current === '#222327') {
    root.style.setProperty('--bg-primary', '#29FD53');
  } else {
    root.style.setProperty('--bg-primary', '#222327');
  }
}

✅ 优势：无需解析 RGB、支持主题扩展、样式集中管理。