本文详解如何用原生 javascript 实现可点击方块的背景色切换（如点击变 #eaef44，再点击恢复原色），修正常见 dom 事件与样式操作错误，并提供健壮、可复用的代码方案。
本文详解如何用原生 javascript 实现可点击方块的背景色切换（如点击变 #eaef44，再点击恢复原色），修正常见 dom 事件与样式操作错误，并提供健壮、可复用的代码方案。
要让 HTML 方块支持“点击切换背景色”的交互行为，关键在于正确绑定事件、准确访问目标元素、合理保存并还原原始样式状态。原代码中存在多个典型错误：函数名不一致（changeBackgroundColor 定义但调用 changeColor）、未传递事件对象、误用 event.style（应为 event.target.style）、且混淆了 CSS 属性名（backgroundColor 而非 changeBackgroundColor）。
以下是推荐的完整实现方案，采用语义清晰、可维护性强的方式：
✅ HTML 结构（保持简洁，无需内联 onclick）
建议使用现代事件委托或统一绑定方式，避免在每个 <div> 中重复写 <code>onclick。但为兼容性与直观性，此处先展示修复后的内联调用写法（后续会优化）：
<div class="square" id="D14" style="background-color: #eee1c6;"></div> <div class="square" id="E14" style="background-color: #00a881;"></div> <div class="square" id="F14" style="background-color: #eee1c6;"></div> <div class="square" id="G14" style="background-color: #00a881;"></div> <!-- 其余方块同理 -->
✅ JavaScript 逻辑（核心：状态记忆 + 切换控制）
使用 dataset 存储原始背景色，确保首次点击时能准确捕获初始值（包括内联样式、CSS 规则或浏览器默认值），第二次点击则还原：
function changeColor(event) {
const element = event.target;
const highlightColor = "#eaef44"; // 高亮色（可按需修改）
// 若已记录原始色，则还原；否则保存当前色并高亮
if (element.dataset.originalColor) {
element.style.backgroundColor = element.dataset.originalColor;
delete element.dataset.originalColor;
} else {
// 兼容：优先取内联 style， fallback 到 computedStyle（应对 CSS 设置的背景）
const computedBg = getComputedStyle(element).backgroundColor;
const currentBg = element.style.backgroundColor || computedBg;
element.dataset.originalColor = currentBg;
element.style.backgroundColor = highlightColor;
}
}
// 批量绑定事件（推荐替代 onclick 内联写法）
document.querySelectorAll('.square').forEach(square => {
square.addEventListener('click', changeColor);
});
⚠️ 注意事项与最佳实践
-
不要依赖
onclick属性：内联 JS 不利于维护，且易出错（如遗漏event参数）。统一使用addEventListener更安全、灵活； -
getComputedStyle是关键兜底：当背景色由外部 CSS 设置（而非style属性）时，element.style.backgroundColor为空字符串，必须通过getComputedStyle(element).backgroundColor获取真实值（返回 RGB 格式，如"rgb(238, 225, 198)"）；若需严格匹配十六进制，可添加 RGB→HEX 转换逻辑； -
性能友好：
dataset操作轻量，无重排重绘风险； -
可扩展性：将
highlightColor抽离为配置常量，或支持多色主题切换；也可为.square添加tabindex="0"并补充键盘Enter/Space支持，提升无障碍体验。
? 总结
实现点击切换颜色的本质是「状态管理」——用 data-* 属性暂存原始样式，结合 event.target 精准操作 DOM。避开 event.style 等无效路径，善用 getComputedStyle 增强鲁棒性，再辅以批量事件绑定，即可构建稳定、专业、符合现代前端规范的交互组件。
