直接操作 style.setProperty() 是最可靠的方式：必须用完整字符串名（含--前缀），如 element.style.setProperty('--size', '16px')；读取用 getComputedStyle().getPropertyValue()；批量更新应合并设置以避免性能抖动。
直接操作 style.setProperty() 是最可靠的方式
JavaScript 动态更新 CSS 自定义属性（即 --my-color 这类）时，不能用 element.style.myColor 或 element.style.setProperty('myColor', ...) —— 因为自定义属性名带连字符且不是标准 CSS 属性，必须显式传入完整字符串名（含 -- 前缀），且只能通过 style.setProperty() 或 document.documentElement.style.setProperty() 等 DOM API 修改。
常见错误现象：element.style.setProperty('color', 'red') 能生效，但 element.style.setProperty('my-color', 'blue') 完全无效——漏了 --；或者误写成 element.style['--my-color'] = 'blue'，这不会触发样式重计算。
实操建议：
- 更新元素自身作用域的变量：用
element.style.setProperty('--size', '16px') - 更新全局变量（影响整个页面）：优先用
document.documentElement.style.setProperty('--primary', '#007bff') - 读取当前值要用
getComputedStyle(element).getPropertyValue('--size')，不能用element.style.getPropertyValue()（后者只读内联样式）
批量更新多个自定义属性时，避免重复触发重排重绘
连续调用多次 style.setProperty() 会引发多次样式计算，尤其在循环或动画帧中容易造成性能抖动。浏览器无法自动合并这些变更。
立即学习“Java免费学习笔记（深入）”；
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
实操建议：
- 把多个变量收集到一个对象里，再用
Object.entries()一次性遍历设置：const vars = { '--opacity': '0.8', '--delay': '200ms', '--easing': 'ease-in' }; Object.entries(vars).forEach(([prop, val]) => { root.style.setProperty(prop, val); }); - 如果涉及频繁更新（如拖拽调节器），可先用
requestAnimationFrame节流，再批量写入 - 不要在
for...in中遍历对象并直接 setProperty —— 属性顺序不可控，且可能意外遍历原型链
使用 CSSStyleSheet.insertRule() 动态注入新变量不推荐
有人尝试用 insertRule('--my-var: red;', index) 向样式表插入自定义属性，这在语法上不合法：CSS 规则必须是选择器 + 块，而 --my-var: red 单独存在没有选择器，会导致 SyntaxError 或静默失败。
实操建议：
- 想通过 CSS 文件管理变量？应该用
:root块预定义，再用 JS 修改其style属性 - 动态生成整套主题？更稳妥的做法是切换已预设好的
class（如theme-dark），让对应 CSS 规则接管变量值 - 若真要运行时注入规则，必须包裹在有效选择器内，例如
document.styleSheets[0].insertRule(':root { --accent: #ff6b6b; }', 0)，但这样会覆盖原有 :root 声明，风险高
注意作用域与继承行为导致的“更新不生效”
自定义属性遵循 CSS 继承规则，但只对后代元素生效；父元素修改 --color，子元素必须显式用 color: var(--color) 才能响应。直接改父元素的 style.setProperty() 不会自动刷新子元素的计算值——它只是更新了变量存储，渲染引擎会在下一次样式计算时按需取用。
常见问题场景：
- 子元素用了
var(--size)，但父元素更新--size后尺寸没变？检查是否父元素没传给子元素作用域（比如中间有display: contents或shadow DOM隔离） - 用
getComputedStyle(child).color拿不到新值？因为该 API 返回的是最终计算值（如rgb(255, 0, 0)），不是变量名；要验证变量是否更新成功，应读getComputedStyle(parent).getPropertyValue('--size') - Web Components 中，
:host或::slotted内部的变量需要显式从外部传递，不能靠继承穿透 shadow boundary
display: contents 时，变量看似设置了，实际根本没进入目标元素的作用域。 
