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

本文详解如何用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';
  }
}

? 注意事项：