如何通过JavaScript动态检测并切换CSS背景色

本文详解如何用javascript准确读取元素当前css背景色，并基于该值实现颜色状态的双向切换，同时指出常见作用域错误及解决方案。

在Web开发中，常需根据元素当前样式动态调整外观（例如主题切换按钮）。但直接比较CSS值时极易踩坑——最典型的问题是变量作用域误用：若在函数内声明计数器（如 let i = 0），每次调用函数都会重置为初始值，导致逻辑失效。

你最初的代码使用 getComputedStyle() 获取背景色是正确思路，但存在两个关键问题：

1. 颜色格式不匹配：getComputedStyle(body).getPropertyValue("background-color") 返回的是 rgb(34, 35, 39) 而非 #222327，直接字符串比较必然失败；
2. 作用域错误：在 changeBgC() 中定义 var i = 0，使 i 每次调用都重置为 0，无法维持状态。

✅ 推荐方案：优先采用 CSS 计算值比对（兼容 RGB/HEX） + 状态持久化

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

  // 将 RGB 转为十六进制（支持 rgb(34, 35, 39) → #222327）
  const rgbToHex = (rgbStr) => {
    const match = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    if (!match) return rgbStr;
    const [_, r, g, b] = match;
    return `#${parseInt(r).toString(16).padStart(2, '0')}${parseInt(g).toString(16).padStart(2, '0')}${parseInt(b).toString(16).padStart(2, '0')}`;
  };

  const hexBg = rgbToHex(bgColor);

  if (hexBg === '#222327') {
    body.style.backgroundColor = '#29fd53';
  } else if (hexBg === '#29fd53') {
    body.style.backgroundColor = '#222327';
  }
}

? 注意事项：

万物追踪

AI 追踪任何你关心的信息

下载

立即学习“Java免费学习笔记（深入）”；

• 不要依赖 document.querySelector('.body') —— 你的 CSS 类名为 .body，但 HTML 中 标签没有 class="body"，应使用 document.body 或 document.querySelector('body')；
• 避免在函数内初始化状态变量（如 i），如需计数器，应声明在全局或模块级作用域；
• 生产环境建议使用 CSS 自定义属性（CSS Variables）配合 element.style.setProperty() 实现更优雅的主题管理。

? 进阶提示：若仅需二态切换，可直接用布尔标志替代计数器，语义更清晰：

let isDarkMode = true;
function changeBgC() {
  const body = document.body;
  if (isDarkMode) {
    body.style.backgroundColor = '#29fd53';
  } else {
    body.style.backgroundColor = '#222327';
  }
  isDarkMode = !isDarkMode;
}

这样既避免了颜色解析开销，又提升了可维护性与可读性。