必须用getcomputedstyle读、style.setproperty写；element.style.getpropertyvalue读不到:root变量，因它只查内联样式，不查css文件或:root；读全局变量须用getcomputedstyle(document.documentelement).getpropertyvalue('--theme')。
必须用 getComputedStyle 读，用 style.setProperty 写，漏掉双短横、读错节点、不处理空字符串，全都会静默失败。
为什么 element.style.getPropertyValue 读不到 :root 变量？
因为 element.style 只管 HTML 的 style="" 或 JS 直接赋的内联样式，它根本不看 CSS 文件、<style></style> 块，更不查 :root。想读全局变量，目标节点只能是 document.documentElement：
-
getComputedStyle(document.documentElement).getPropertyValue('--theme')✅ -
document.documentElement.style.getPropertyValue('--theme')❌（永远返回空） -
getComputedStyle(someDiv).getPropertyValue('--theme')❌（除非someDiv自己或某个父元素显式设置了该变量）
自定义属性不继承，但可被子元素通过 var(--theme) 引用——“能用”不等于“能读到”。读取动作只作用于当前元素计算后的结果，不会向上查找。
getComputedStyle().getPropertyValue() 返回值全是字符串
哪怕你在 CSS 里写的是 --size: 16 或 --opacity: 0.7，拿到的都是 "16" 和 "0.7"，不是数字。未定义时返回空字符串 ""，不是 undefined 或 null：
- 需要数值时，必须手动
parseInt(val)或parseFloat(val) - 判空不能写
if (val == null)，得用if (!val.trim()) - 单位也一并返回，比如
--gap: 1.5rem→"1.5rem"，别指望自动拆解
频繁调用 getComputedStyle 会触发强制同步布局（forced layout），在动画帧或滚动中尤其危险，建议缓存结果，或改用 ResizeObserver/IntersectionObserver 等异步时机读取。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
修改变量必须用 style.setProperty，且仅限当前元素
el.style.setProperty('--color', 'red') 是唯一可靠写法。常见错误包括：
- 写成
el.style.--color = 'red'→ 语法错误 - 写成
el.style.color = 'red'→ 改的是原生属性，不是自定义变量 - 对
:root修改却用了document.body.style.setProperty→ 不生效
注意作用域：设在 document.documentElement.style 才算全局；设在某个按钮上，只影响该按钮自身及它后代中显式引用该变量的规则（如 background-color: var(--color)）。IE 完全不支持，JSDOM 测试环境也可能返回空，需提前检测：
if (typeof document.documentElement.style.setProperty === 'function') {
document.documentElement.style.setProperty('--theme', 'dark');
}
移动端 Safari 和强制重排的坑
iOS Safari 13.4 之前版本，setProperty 修改后可能不立即触发重绘，导致视觉延迟。简单粗暴但有效的兜底是触发一次强制布局：
- 读取一个布局相关属性，比如
el.offsetHeight，就能让浏览器立刻计算新样式 - 但别在循环里这么干，否则性能雪崩
- 现代浏览器（Chrome/Firefox/Safari 14+）已稳定支持即时响应，仅旧版 iOS 需要
真正容易被忽略的，是变量“存在但未生效”的情况：比如 CSS 中写了 :root { --color: red; }，但 JS 在 DOM ready 前就读取，或变量名拼错多一个空格（'--color '），结果都是返回空字符串——没报错，也不警告，只默默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
