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

本文详解如何在 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、支持主题扩展、样式集中管理。

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

✅ 最终 html 调用示例（修正版）

   ≣ 

确保对应 CSS 中 body 的初始背景由类或规则定义（如 .body { background: #222327; }），且该类已正确应用到

元素上（或直接写 body { ... }）。

总结：检测并切换 CSS 背景色的关键在于——用 getComputedStyle 读取真实值、标准化颜色格式、保持状态在函数外、优先采用 CSS 自定义属性方案。这样即可实现稳定、可扩展的双向主题切换功能。