本文讲解如何通过 javascript 实现“仅高亮最后一个点击的色块”，同时将页面背景色同步切换为该色块对应颜色，并自动还原其他色块的原始样式。
本文讲解如何通过 javascript 实现“仅高亮最后一个点击的色块”，同时将页面背景色同步切换为该色块对应颜色，并自动还原其他色块的原始样式。
在构建色彩切换器（Color Switcher）类交互组件时，一个常见需求是：用户点击某个色块后，不仅页面背景色随之改变，该色块自身也应有明确的视觉反馈（如变暗或加边框），且同一时刻仅有一个色块处于高亮状态。原始代码能切换背景色，但未处理多色块间的互斥高亮逻辑——即前一个被点击的色块颜色不会自动恢复。
解决的关键在于：每次点击时，先重置所有色块的背景色为其原始值，再单独为当前点击的色块设置高亮样式。但注意：我们无法直接读取 CSS 中定义的 background-color（例如 #white 是 ID 名，不是颜色值），因此更稳健的做法是——预先缓存每个色块的原始背景色，并在点击时统一还原，再高亮当前项。
不过，本例中结构清晰、色块 ID 与颜色语义一致（如 id="blue" 对应 blue），且原始样式已通过 CSS 显式定义。因此可采用“按 ID 映射颜色值”的策略，结合双重遍历实现精准控制：
let h2 = document.querySelector("h2");
let p = document.querySelector("p");
let boxes = document.querySelectorAll(".box");
let body = document.body;
// 预定义各 ID 对应的实际 CSS 颜色值（兼容关键字与 HEX）
const colorMap = {
"grey": "grey",
"white": "white",
"blue": "blue",
"yellow": "yellow"
};
boxes.forEach((box) => {
box.addEventListener("click", (e) => {
const id = e.target.id;
const bgColor = colorMap[id] || id; // 安全回退
// 更新页面背景
body.style.backgroundColor = bgColor;
// 根据背景色调整文字对比度
if (id === "white" || id === "yellow") {
h2.style.color = "black";
p.style.color = "black";
} else {
h2.style.color = "white";
p.style.color = "white";
}
// 重置所有色块：还原为原始颜色；仅当前项设为高亮色（#343434）
boxes.forEach((b) => {
b.style.backgroundColor = (b.id === id)
? "#343434"
: colorMap[b.id] || b.id;
});
});
});
✅ 关键点说明：
- 使用 colorMap 对象显式维护 ID 与真实颜色值的映射，避免依赖 getComputedStyle 的复杂性，提升可读性与兼容性；
- boxes.forEach() 内部对每个 .box 元素进行判断：若其 id 与当前点击元素一致，则设为深灰高亮 #343434，否则还原为原始色；
- 文字颜色逻辑保持不变，确保在浅色背景（white/yellow）下文字为黑色，深色背景（grey/blue）下为白色，保障可访问性。
⚠️ 注意事项：
- 若未来扩展更多色块，请务必同步更新 colorMap，否则高亮/还原逻辑将失效；
- 此方案不依赖额外 CSS 类，纯 JS 控制样式，适合轻量级场景；如项目已使用 CSS-in-JS 或框架（如 React），建议抽离为状态管理（如 activeId）+ className 切换，以更好支持主题与 SSR；
- 原始 HTML 中 #white 等 ID 选择器在 CSS 里生效，但 JS 中通过 e.target.id 获取的是字符串 "white"，需确保与 colorMap 键名严格一致。
通过这一模式，你将获得一个响应迅速、逻辑清晰、易于维护的单选式色彩切换器——每一次点击都干净利落地聚焦当前选择，兼顾功能完整性与用户体验一致性。
