应优先用 CSS 类切换或 :style 绑定对象实现按钮动态着色，避免内联 style 字符串拼接；DOM 中 style 属性名须驼峰（如 backgroundColor），不可用短横线；多状态时应抽离为 class，主题切换宜用 CSS 变量。
直接用 style 属性动态改按钮颜色，不是不能做，而是容易踩坑——比如内联样式优先级高但不可复用、驼峰命名漏写、字符串拼接出错、多次赋值覆盖失效。真要局部动态着色，得盯紧三件事：属性名写法、值的合法性、更新时机是否触发重绘。
style 属性里写 CSS 属性名必须用驼峰（如 fontSize），不能用短横线（如 font-size）
HTML 的 style 是 DOM 属性，走的是 JavaScript 命名规范。浏览器解析时会把 font-size 当成非法标识符，直接忽略整条声明。
-
style="font-size: 14px"→ 在 HTML 标签里能生效，但这是 HTML 解析器在做转换，不是 JS 操作 -
element.style.fontSize = '14px'→ 正确，JS 层必须驼峰 -
element.style['font-size'] = '14px'→ 语法合法但不推荐，易混淆且 IDE 不提示 - 常见错误：
background-color写成element.style.background-color→ 报错：Invalid left-hand side in assignment
动态修改 style 时，别用字符串拼接，优先用对象或 classList
手动拼 style="color: red; background-color: blue" 容易漏分号、引号错位、重复覆盖。尤其当按钮同时要改颜色、大小、圆角时，字符串维护成本直线上升。
- 错误示范：
btn.style.cssText = 'color: ' + textColor + '; background: ' + bgColor→ 一旦textColor为空或含空格，整个样式崩掉 - 更稳做法：用
Object.assign(btn.style, { color: textColor, backgroundColor: bgColor, borderRadius: '4px' }) - 最佳实践：预定义 CSS 类（如
.btn-primary、.btn-warning），用btn.classList.toggle('btn-warning')切换 —— 语义清晰、CSS 可复用、避免内联样式污染
Vue/React 等框架中，:style 绑定对象比数组更可控
Vue 模板里写 :style="[{ color: 'red' }]" 看似灵活，实则隐性风险大：数组写法只合并同名属性，若多个对象都设 color，最终以最后一个为准，调试困难。
立即学习“前端免费学习笔记（深入）”；
- 推荐用对象绑定：
:style="{ color: isActive ? '#fff' : '#333', backgroundColor: statusColor }" - 避免混合写法：
:style="[{ fontSize: '16px' }, { color: textColor }]"→ 虽然 Vue 支持，但可读性差、diff 效率低 - 注意响应式限制：
style对象里的 key 必须是响应式数据，直接写死字符串（如{ color: 'red' }）不会随状态变化
真正难的不是“怎么让按钮变红”，而是“什么时候该用 style、什么时候该抽 class、什么时候该交由 CSS 变量控制”。局部动态着色一旦超过两种状态，就该收进 class；涉及主题切换或用户偏好，就得上 :root 变量 + style.setProperty()。别让一个 style 属性，变成后续三年不敢动的祖传代码。
