setProperty 有时不生效是因为作用域错配、变量名漏掉--前缀、值未转字符串，或继承链/!important 干扰；应确保操作正确节点、带--前缀、传字符串值，并注意读取时trim和检查存在性。
可以直接用 element.style.setProperty() 修改 CSS 变量，但必须确保目标元素是实际应用该变量的 DOM 节点（或 :root），且变量名带 -- 前缀。
为什么 setProperty 有时不生效？
常见原因是作用域错配：CSS 变量是级联的，setProperty 只影响调用对象的 style 属性，不会自动传播到子元素继承链之外。
- 想全局修改，得操作
document.documentElement或document.body，而不是随便一个 div - 如果 CSS 中写的是
div { --color: red; }，那必须对那个div元素调用setProperty，不能对父容器设 - 变量名漏掉
--（例如传"color"而不是"--color"）会导致静默失败
如何安全地更新 :root 下的 CSS 变量？
这是最常用场景，比如主题色切换。直接操作 document.documentElement.style 即可：
document.documentElement.style.setProperty('--primary-color', '#3b82f6');
注意：
立即学习“Java免费学习笔记（深入）”；
- 值必须是字符串，即使传数字也要转成
"20px"、"0.8"，不能传20或0.8 - 如果变量原本在
:root里定义为--gap: 1rem;，改的时候也得用setProperty('--gap', '2rem') - 浏览器会立即重绘，无需手动触发 layout 或 repaint
动态读取 + 修改变量值时的陷阱
别用 getComputedStyle(element).getPropertyValue('--var-name') 后直接拼接修改——返回值可能带空格或单位格式不一致（如 " 16px "），导致后续计算出错。
- 读取后建议先
.trim()，再按需解析：parseFloat(getPropertyValue('--size')) - 修改前最好检查变量是否存在：
getComputedStyle(document.documentElement).getPropertyValue('--theme') !== '' - 避免在循环中高频调用
setProperty，它会触发样式计算；批量改用一个Object.entries()一次设置
真正麻烦的不是怎么设，而是你得清楚这个变量当前被谁消费、从哪继承、有没有被 !important 掩盖——这些没法靠 setProperty 自动解决。
