最稳定方式是用getComputedStyle().getPropertyValue()读取CSS自定义属性；修改则通过element.style.setProperty()设置，注意作用域、拼写和执行时机，避免强制同步布局。
怎么在 JavaScript 里读取 CSS 自定义属性（--xxx）
直接用 getComputedStyle + getPropertyValue，这是最稳定、兼容性最好的方式。别试图去解析 style 属性或遍历 cssRules，那些要么拿不到全局变量，要么跨 shadow DOM 失效。
常见错误现象：element.style.getPropertyValue('--color') 返回空字符串——因为 style 只读内联样式，不包含来自 :root 或选择器的变量。
- 先获取计算后样式：
const styles = getComputedStyle(document.documentElement)（读 :root）或getComputedStyle(el)（读元素最终生效值） - 再取值：
styles.getPropertyValue('--primary-color')，注意带两个短横线和引号 - 返回值总是字符串，哪怕你设的是数字，比如
'24'而不是24，需要手动parseInt或parseFloat
怎么在 JavaScript 里动态修改 CSS 变量
改 :root 或任意元素的 style 属性即可，本质是写内联样式，优先级高于外部 CSS 中的同名变量。
使用场景：主题切换、尺寸响应式调整、动画中间态控制。不要用 JS 去重写整个 CSS 文件或操作 document.styleSheets，维护成本高且容易出竞态。
立即学习“Java免费学习笔记（深入）”；
- 改全局变量：
document.documentElement.style.setProperty('--bg', '#ffeb3b') - 改某元素变量：
myEl.style.setProperty('--hover-scale', '1.2') - 删变量：
myEl.style.removeProperty('--hover-scale')，会回退到上级定义（如 :root）或初始值 - 批量设置建议用
Object.assign(el.style, { '--a': '1', '--b': '2' })，但注意这会覆盖其他内联样式，慎用
getPropertyValue 拿不到值？检查这三件事
不是 JS 写错了，大概率是 CSS 变量根本没生效，或者作用域不对。
常见错误现象：控制台打印 '' 或 'null'，但开发者工具里明明看到变量存在。
- 确认变量已声明且拼写完全一致（区分大小写，
--MainColor≠--main-color） - 确认作用域：如果从
:root读，但变量只在.card里定义，那getComputedStyle(document.documentElement)就读不到 - 确认时机：脚本执行时 DOM 是否就绪？变量是否被后续 CSS 覆盖？建议在
DOMContentLoaded后读，或用MutationObserver监听style变化（极少需要）
CSS 变量传给 JS 的性能和边界要注意什么
读写本身极快，但频繁读取（比如在 requestAnimationFrame 里）可能触发强制同步布局（forced layout），尤其当依赖的变量影响几何属性时。
性能影响比想象中敏感：一次 getComputedStyle 调用可能让浏览器重排，连续读多个属性更糟。
- 读取尽量合并：用一个
getComputedStyle结果，多次getPropertyValue，别反复调用 - 避免在 scroll / resize 回调里直接读变量，缓存值或节流
- JS 无法监听 CSS 变量变化，想响应式更新得自己封装逻辑（比如配合
CustomEvent或Proxy包裹 setProperty） - IE 完全不支持 CSS 变量，如果还要兼容，得 fallback 到 data-attribute 或 class 切换
真正复杂的地方不在语法，而在变量生命周期管理——谁定义、谁读、谁改、改完谁响应。这些关系一旦松散，调试时就会发现值“好像变了又没变”。
