style.setProperty兼容性要点：十六进制和rgb()安全，hsl需严格空格；CSS变量名区分大小写且短横线不等价下划线；currentColor不响应变量更新；批量操作应避免读写混用以防强制重排。
style.setProperty 修改颜色时，十六进制和 rgb() 的兼容性差异
直接写 style.setProperty('color', '#ff6b35') 没问题，但换成 rgb(255, 107, 53) 也行；真正容易出错的是带百分比或 hsl/hsla 的值——浏览器解析严格，空格、括号缺一不可。比如 hsl(12, 100%, 60%) 少个空格（写成 hsl(12,100%,60%)）在部分旧版 Safari 里会静默失败，getComputedStyle 仍返回旧值。
- 推荐统一用小写十六进制或标准 rgb/rgba 字符串，避免 hsl 类函数在低版本 iOS WebView 中不生效
- 若必须用变量拼接 rgb，确保逗号后有空格：
`rgb(${r}, ${g}, ${b})`→ 正确；`rgb(${r},${g},${b})`→ 部分环境拒绝解析 - 透明度优先用 rgba() 而非 hex + opacity，避免 opacity 影响子元素
setProperty 设置 CSS 变量（自定义属性）时的大小写敏感陷阱
设置 --main-color 没问题，但写成 --Main-Color 或 --main_Color 后，JS 里读取时必须完全一致——CSS 变量名区分大小写，且下划线和短横线不等价。更隐蔽的是：如果在 :root 里声明了 --MAIN-COLOR，而脚本调用 element.style.setProperty('--main-color', 'red')，两者互不影响，不会覆盖。
- 约定全部使用 kebab-case（短横线分隔），如
--text-primary，避免大小写混淆 - 修改全局变量应操作
document.documentElement.style，而非某个元素的style - 检查是否生效？别只看元素内联样式，用
getComputedStyle(el).getPropertyValue('--text-primary')读取计算值
动态改色时，currentColor 的响应行为被忽略
如果某元素设置了 color: var(--accent);，又用 style.setProperty('--accent', 'blue') 更新，后代中用了 border-color: currentColor 的元素，其边框**不会自动同步变蓝**——因为 currentColor 是继承值，它绑定的是父级的 color 计算结果，不是实时监听变量变化。
- 要让 currentColor 响应变化，必须触发父级 color 的重计算，例如：先设
parent.style.color = 'transparent'，再设回新值 - 更稳妥的做法是绕过 currentColor，直接对目标元素设置
border-color的变量，如border-color: var(--accent) - 注意：伪元素（::before/::after）中的 currentColor 不会因父级变量更新而重绘，需手动触发 reflow（如读取 offsetHeight）
批量 setProperty 性能卡顿的真实原因
连续调用 20 次 element.style.setProperty 并不会立刻重排，但一旦中间穿插了 getComputedStyle 或 offsetTop 等强制布局读取，浏览器就会同步执行所有待处理样式变更，造成 layout thrashing。这不是 setProperty 本身慢，而是读写混用触发了强制同步。
- 避免在循环里读写交替：先集中写完所有
setProperty，最后统一读取 - 批量更新建议用
CSSStyleSheet.insertRule或切换 class，比逐个 setProperty 更高效 - 动画场景慎用 setProperty 控制颜色——transition 对 CSS 变量支持不一，Chrome 支持良好，Firefox 对
background: var(--bg)的过渡可能跳帧
变量名拼错、大小写不一致、currentColor 的惰性计算，这三处最容易在改完以为生效了，结果 QA 提 bug 才发现没动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
