返回空字符串是正常行为，说明变量未在目标元素上生效；常见原因包括元素未挂载、作用域不匹配、拼写错误或样式未完成计算，应通过DevTools的Computed面板验证。
getComputedStyle().getPropertyValue('--x') 返回空字符串
这不是 JS 读取失败，而是浏览器根本没把该变量“算进”目标元素的最终样式里。返回 "" 是正常行为，不代表代码写错了，只说明变量未在该元素上生效。
常见原因包括：
- 元素尚未挂载到 DOM（
el.isConnected === false），getComputedStyle拿不到任何计算样式 - CSS 变量定义在
.theme-dark { --color: red; }里，但目标元素或其祖先没加class="theme-dark"，规则压根没匹配 - 变量写在
:root，却去读一个孤立的<p></p>—— 它继承了:root的变量，但前提是它已渲染、有样式上下文 - 拼写不一致：
--Color-Primary和--color-primary是两个不同变量，CSS 变量名大小写敏感
验证是否生效最直接的方式：打开 DevTools → Computed 面板 → 搜索 --x，看它是否出现在目标元素的 computed style 列表中。
element.style.getPropertyValue('--x') 报错或返回 undefined
element.style 对象只映射内联样式（即 style="..." 属性里的声明），它根本没有 getPropertyValue 这个方法 —— 调用会直接抛 TypeError。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 读取内联设置的变量：用
element.style.getPropertyValue❌ 错误；应改用getComputedStyle(element).getPropertyValue('--x')✅ - 写入内联变量：必须用
element.style.setProperty('--x', 'red')，不能写成element.style.--x = 'red'（语法非法） - 如果变量只定义在 CSS 文件中（如
:root { --x: 10px; }），它不会出现在element.style里，也永远不会被element.style对象“看见”
变量已定义但 getPropertyValue 仍返回空字符串
返回 "" 不等于“未定义”，它可能是以下任一情况：
- 变量值本身就是空字符串（
--gap: ""） - 变量被设置了但作用域不覆盖目标元素（比如定义在
.card，却去读<div>） - 变量用了 fallback 但 fallback 值为空：
var(--x, "")→ 最终计算结果仍是"" - 浏览器尚未完成样式计算（例如刚
appendChild就立刻读）
安全读取模式：
const val = getComputedStyle(el).getPropertyValue('--x').trim();
if (!val) {
// 不要 == null，用 !val.trim() 判断
}
为什么不能用 if (val) 直接判断布尔逻辑
CSS 变量值永远是字符串，哪怕你设的是 --is-open: 1，拿到的也是 "1"；设的是 --is-open: false，拿到的也是 "false" —— 它们都不是 JS 布尔值。
更危险的是：--is-open: 0 → "0" → if ("0") 为真；--is-open: （空定义）→ "" → if ("") 为假。这种隐式转换极易出错。
真正可控的写法是：
- 明确约定语义：
--is-open: 1/--is-open: 0，然后用parseInt(val, 10) === 1 - 用 CSS class 或
data-属性承载状态，JS 直接查el.classList.contains('is-open')或el.dataset.isOpen - 避免让 CSS 变量承担控制流职责——它适合传配置（颜色、尺寸），不适合传开关信号
最容易被忽略的一点：CSS 变量的“存在性”和“可读性”由样式计算引擎决定，JS 无法绕过这个时机约束。你以为写了就该有，其实浏览器只认“此刻是否参与了样式计算”。
