用 setProperty 可精准修改 CSS 变量值：全局用 document.documentElement.style.setProperty，局部用元素.style.setProperty；需确保变量被正确继承、作用域有效、值为字符串且带单位，注意大小写敏感和过渡限制。
怎么用 setProperty 改变 CSS 变量
直接改 :root 或某个元素上的 CSS 变量，靠的就是 style.setProperty。它不操作 DOM 结构，也不重写整个 style 字符串，只精准更新一个变量值。
常见错误是：对非内联样式元素调用 element.style.setProperty，结果没反应——因为 element.style 只读写内联样式，得先拿到目标元素的 style 对象（比如 document.documentElement.style 改全局主题）。
- 改全局主题色：
document.documentElement.style.setProperty('--primary-color', '#3b82f6') - 改某个组件主题：
cardElement.style.setProperty('--bg-color', '#f9fafb') - 值必须是字符串，哪怕数字也要带单位，比如
'24px'、'0.8'，不能传24或0.8 - 变量名要带两个短横线前缀，写成
'--color-primary'，别漏掉--
setProperty 为什么有时不生效
不是方法错了，而是变量没被正确继承或作用域不对。CSS 变量遵循级联和作用域规则，setProperty 只负责“设值”，不保证“被用到”。
典型场景：你在 :root 设了 --text-color，但某段文字用了 color: var(--text-color)，却还是黑色——大概率是该元素或其父级又显式设置了 color，把 var() 覆盖掉了。
立即学习“Java免费学习笔记（深入）”；
- 检查 computed styles，看
color最终解析值是不是你设的变量值，而不是变量名本身 - 确保使用
var(--xxx)的地方，其作用域内确实存在该变量（就近原则，父级没定义就查不到） - 动态改完后，如果依赖该变量的伪元素（如
::before）没刷新，可能需要触发一次重排，比如读一下offsetHeight - 注意大小写敏感：
--MainColor和--maincolor是两个变量
和 CSSStyleSheet.insertRule 比有什么区别
setProperty 是运行时修改已有变量值，轻量、可逆、支持动画过渡；insertRule 是往样式表里塞新 CSS 规则，适合批量换整套主题，但操作更重、易出错、不便于状态管理。
容易踩的坑是：有人想用 insertRule 去“覆盖”变量定义，结果发现老规则还在，新规则优先级不够，或者插入位置不对导致无效。
-
setProperty修改的是计算后的值，响应快，适合按钮点击切换主题 -
insertRule适合预设多套主题 CSS，通过 class 切换，但要手动管理规则索引和清理 - 用
insertRule动态加:root { --x: y }，必须确保插入到正确的CSSStyleSheet（通常是document.styleSheets[0]），且注意浏览器限制（跨域样式表不可写） - 过渡动画只对
setProperty生效（前提是原生属性支持，如background-color），变量本身不能直接过渡
主题切换时要注意的兼容性和性能点
不是所有浏览器都对 CSS 变量 + setProperty 做了深度优化，尤其在频繁切换或大量元素响应时，会卡顿。
老版本 Safari（var() 的重计算有延迟，Android WebView 也有类似问题；另外，如果每个卡片都监听 :root 变量变化并自行重绘，不如集中用一个 class 控制根节点，靠 CSS 自动下发。
- 避免在 scroll 或 input 事件里高频调用
setProperty，至少节流到 60ms 以上 - 深色模式切换时，别逐个元素设变量，优先改
document.documentElement，让 CSS 自动传播 - 服务端渲染（SSR）页面首次加载时，JS 还没执行，
:root里的变量值应和 HTML 中的初始 class 匹配，否则闪屏 - 用
window.matchMedia('(prefers-color-scheme: dark)')监听系统偏好，但别只依赖它——用户可能手动覆盖
