直接修改 document.body.style.backgroundcolor 是最简方式，但需通过 style 对象而非 body 元素直接赋值；推荐用 classlist 切换预设 css 类以避免内联样式污染和兼容问题。
用 document.body.style.backgroundColor 直接改背景色
最直接的方式是操作 body 元素的内联样式。点击按钮时，JavaScript 修改 document.body.style.backgroundColor 即可生效，不需要操作 CSS 文件或 class 切换。
常见错误是写成 document.body.backgroundColor = 'red' —— 这个属性根本不存在，必须走 style 对象。
实操建议：
- 确保按钮有
id或其他可选中方式，比如<button id="colorBtn">换色</button> - 绑定事件推荐用
addEventListener，避免覆盖已有监听器 - 颜色值支持十六进制（
'#ff6b35'）、英文名（'lightblue'）、RGB（'rgb(255, 107, 53)'）等标准格式
用数组存多个颜色，实现循环切换
如果想点一次换一个色、不重复、有规律，硬编码多个 if/else 很容易出错，也难维护。更稳妥的是把颜色存在数组里，用索引控制轮转。
容易踩的坑是每次点击都重新声明数组和索引变量，导致状态丢失 —— 必须把它们放在事件处理函数外部，或用闭包/模块封装。
示例逻辑：
const colors = ['#4a6fa5', '#6b8e23', '#c71585', '#ffd700'];
let index = 0;
document.getElementById('colorBtn').addEventListener('click', () => {
document.body.style.backgroundColor = colors[index];
index = (index + 1) % colors.length;
});
避免内联样式污染，用 classList.toggle 更可控
直接写 style.backgroundColor 会覆盖掉原本可能存在的其他内联样式（比如 style="margin:0"），而且不利于复用和主题管理。更健壮的做法是预设 CSS class，用 JS 切换类名。
注意：不要用 className = 'xxx' 全量替换，会清空所有已有 class；classList.toggle 或 classList.replace 更安全。
对应 HTML 和 CSS 示例：
<style>
.bg-red { background-color: #e53e3e; }
.bg-blue { background-color: #3182ce; }
.bg-green { background-color: #38a169; }
</style><button onclick="switchBg('bg-red')">红</button>
<button onclick="switchBg('bg-blue')">蓝</button>
JS 部分：
function switchBg(className) {
document.body.classList.remove('bg-red', 'bg-blue', 'bg-green');
document.body.classList.add(className);
}
移动端点击无响应？检查 touchstart 和 cursor
在 iOS 或部分安卓浏览器中，只监听 click 可能有约 300ms 延迟甚至失灵，尤其页面没设置 viewport 时。不是 bug，是浏览器为双击缩放留的判断窗口。
解决方法很简单：给按钮加 touchstart 事件，或同时监听两个事件；另外确认按钮有 cursor: pointer 和足够点击区域（至少 44×44px）。
实操建议：
- 添加
<meta name="viewport" content="width=device-width, initial-scale=1">到head - 按钮 CSS 加上
cursor: pointer; -webkit-tap-highlight-color: transparent; - 事件监听别只写
onclick，优先用addEventListener('click', ...)并补上'touchstart'
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
