购物车按钮变色需兼顾多端交互与无障碍：仅改background-color易致文字消失、样式覆盖、移动端失效；应通过classList切换状态类，补全:hover/:active/:focus反馈，并适配高对比度模式。
购物车按钮变色不是简单改个 background-color 就完事——颜色突兀、状态混乱、移动端失效、无障碍不达标，这些才是真实项目里卡住人的地方。
直接内联 style 改背景色，为什么常出错？
很多人用 快速试效果，但漏掉配套设置就会翻车：
- 只设
background-color没配color，文字和背景同色（比如深红+黑字），按钮“消失” - 漏写分号，如
style="background-color: #ff6b35 color: white"，后面样式全被忽略 - 内联样式优先级最高，后续 CSS 里的
.add-to-cart:hover可能被静默覆盖，调试时找不到原因 - 老浏览器（IE11 及更早）不支持
rgba()，用background-color: rgba(255, 107, 53, 0.8)会导致背景变透明甚至空白
hover 发光效果怎么写才不踩坑？
发光本质是 box-shadow，但纯靠 :hover 在手机上根本没用——手指没有“滑过”，只有点击或长按。必须补全交互链：
- 鼠标设备：用
.add-to-cart:hover { box-shadow: 0 0 12px 4px rgba(100, 200, 255, 0.6); }，蓝色系最稳，避免纯白过曝 - 触摸设备：必须加
.add-to-cart:active { transform: scale(0.98); }提供点击反馈，否则用户点完没感觉 - 键盘用户：如果用了
outline: none，得手动补.add-to-cart:focus { box-shadow: 0 0 0 3px rgba(100, 200, 255, 0.4); }，否则无法识别焦点位置 - 高对比度模式下
box-shadow会被系统强制清空，建议加后备：.add-to-cart:focus { border-color: #64c8ff; }
点击后保持变色，该用 classList 还是 style？
想让按钮点一次变红、再点一次恢复，别直接操作 element.style.backgroundColor ——它会覆盖所有 CSS 声明，包括 transition 和 :hover 效果，导致动画中断。
- 正确做法是用
classList.toggle('is-added')切换类名，CSS 里定义：.is-added { background-color: #e74c3c; } - 如果按钮有多个状态（未登录/库存不足/已加入），用
dataset更清晰：button.dataset.state = 'added'，再配合属性选择器button[data-state="added"] - 千万别写
button.backgroundColor = '#e74c3c'——这个属性根本不存在，JS 不报错但也不生效 - 操作前务必检查元素是否存在：
if (btn) btn.classList.toggle('is-added');，否则Cannot read property 'classList' of null
真正难的不是让按钮变色，而是让变色在各种设备、各种输入方式、各种系统设置下都有一致且可感知的反馈。一个没处理 :focus 的发光按钮，在键盘导航场景下等于不可用；一个没加 :active 的按钮，在 iPad 上点起来就像没反应——这些细节，上线前最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
