必须用getComputedStyle读取内联声明的CSS变量，因style.getPropertyValue仅返回原始字符串，无法获取继承、级联或var()解析后的最终值；返回值恒为需trim()处理的字符串，错误时静默返回空字符串。
读取内联声明的 CSS 变量必须用 getComputedStyle，不能用 style.getPropertyValue
直接访问 element.style.getPropertyValue('--my-var') 只能拿到写在 style 属性里的原始字符串（比如 <div style="--color: red">），但一旦变量参与了计算（如被 <code>var(--color) 引用）、或经过级联/继承，style 就完全不可见了。真正生效的值得靠 getComputedStyle 提取。
-
getComputedStyle(el).getPropertyValue('--my-var')返回的是该元素上最终计算出的值（含继承、var()解析后结果） - 如果变量只在
:root定义，而你在子元素上调用，只要该子元素继承了该变量（默认行为），就能读到 - 返回值恒为字符串，哪怕你设的是数字或布尔值：
"16"、"true"、"#fff" - 拼错名、变量未作用于该元素、或尚未计算完成时，静默返回
""（空字符串），不是null或undefined
为什么 document.documentElement.style 读不到 :root 声明的变量？
document.documentElement.style 只管内联样式，:root { --color: red; } 是 CSS 规则，不进 style 对象。想读全局变量，得用 getComputedStyle(document.documentElement).getPropertyValue('--color') —— 因为 :root 就是文档根元素，它的计算样式才包含这些声明。
- 别写成
document.documentElement.style.getPropertyValue('--color')，这永远返回空 - 也不要用
getComputedStyle(document.body)代替，body不一定继承:root的所有变量（尤其当中间有重定义时） - 如果页面用了 Shadow DOM，
getComputedStyle默认不穿透，需显式调用shadowRoot.host或用composed: true选项
读取前必须 trim()，否则空格导致匹配失败
getPropertyValue() 返回的字符串可能带首尾空格，尤其在多行内联样式或复杂声明中（比如 style="--size: 1rem; --color: #000;"）。不清理就直接比对颜色或数值，很容易出错。
- 正确写法：
getComputedStyle(el).getPropertyValue('--color').trim() - 错误写法：
if (val === '#000') {...}—— 实际可能是" #000 " - 数值转换也得先
trim()再parseFloat()或parseInt()，否则parseInt(" 16px ") === NaN
IE 完全不支持，JSDOM 环境要小心返回空
所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 getComputedStyle(el).getPropertyValue('--x')，但 IE 任何版本都不支持自定义属性和这个读取方式。Node.js 测试环境（如 JSDOM）虽模拟了 API，但默认不解析 CSS 变量，getPropertyValue('--x') 直接返回 ""，不会报错。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：提前检测支持性
if (window.CSS && CSS.supports('color', 'var(--x)')) - JSDOM 中需手动启用：初始化时加
resources: 'usable'并注入 CSS 字符串，否则变量不生效 - 不要依赖
== null判空，一律用!val.trim()
最常被忽略的是空格和静默失败——它不报错、不警告，只默默返回空字符串，调试时容易卡很久。
