直接修改 style.backgroundColor 最快但易失效，因需元素有渲染尺寸且易被 background 简写覆盖；推荐用 classList.toggle() 切换预设 CSS 类，兼顾可靠性与可维护性。

直接改 style.backgroundColor 最快但容易失效

写 onclick="this.style.backgroundColor='#ff6b6b'" 确实能立刻变色，但前提是元素本身有明确的渲染尺寸（比如设置了 height 或内容撑开），否则背景色“存在却看不见”。更常见的是被 CSS 的 background 简写覆盖——例如你写了 background: url(...) no-repeat #fff，再设 backgroundColor 就无效，因为简写会重置所有子属性。

推荐只操作 backgroundColor，颜色值用十六进制（#4ecdc4）或 RGB（rgb(78, 205, 196)），别用 "blue" 这类名字：语义模糊、难调试、后期没法批量替换。

用 classList.toggle() 更可靠也更易维护

纯 CSS 没法记住点击状态，:active 只响应按下瞬间，:visited 只对链接有效。必须靠 JS 记录状态，而切换 class 是最干净的方式。

• 先在 CSS 里定义好类：.bg-active { background-color: #ff6b6b; }
• JS 里绑定点击事件：element.addEventListener('click', () => el.classList.toggle('bg-active'))
• 如果要单选互斥（比如表格行高亮），得先清除其他元素的 class：document.querySelectorAll('.row').forEach(r => r.classList.remove('bg-active'))

注意移动端和框架里的特殊表现

在 iOS Safari 上，body 背景有时不响应，加一句 document.body.style.minHeight = '100vh' 能强制撑开；React/Vue 项目里，别试图在组件内改 document.body.style——它绕过虚拟 DOM 更新机制，且刷新就丢，应该用状态驱动或全局 CSS 变量。

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

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

如果用了 contenteditable 元素（比如富文本编辑器），直接设 backgroundColor 会导致光标颜色错乱，此时必须走 CSS 变量 + data-theme 属性控制整套主题，而不是局部改色。

data- 属性配合 JS 实现多态切换

当每个元素要切换成不同颜色时，硬编码 if/else 很累。把颜色存在 data-bgc 里，点击时读取并应用：

 <li data-bgc="#45b7d1">蓝色</li>
<li data-bgc="#ff6b6b">红色</li>

JS 里这样取：el.addEventListener('click', () => { el.style.backgroundColor = el.dataset.bgc })。注意 dataset 自动把 data-bgc 转成 bgc，驼峰命名也支持（如 data-bg-color → dataset.bgColor）。

这种写法灵活，但别在每次点击里重复声明数组或对象——状态必须保留在函数作用域外，否则索引永远从 0 开始。