本文详解如何用javascript准确读取元素当前css背景色，并基于该值实现颜色状态的双向切换，同时指出常见作用域错误及解决方案。
在Web开发中，常需根据元素当前样式动态调整外观（例如主题切换按钮）。但直接比较CSS值时极易踩坑——最典型的问题是变量作用域误用：若在函数内声明计数器（如 let i = 0），每次调用函数都会重置为初始值，导致逻辑失效。
你最初的代码使用 getComputedStyle() 获取背景色是正确思路，但存在两个关键问题：
- 颜色格式不匹配：getComputedStyle(body).getPropertyValue("background-color") 返回的是 rgb(34, 35, 39) 而非 #222327，直接字符串比较必然失败；
- 作用域错误：在 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';
}
}? 注意事项：
立即学习“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;
}这样既避免了颜色解析开销，又提升了可维护性与可读性。
