getComputedStyle 读取 CSS 自定义属性默认带首尾空格是规范行为，因自定义属性值保留原始声明空白；绝大多数场景必须用 .trim() 清理，否则会导致数值解析失败、比较错误等问题。
JS 通过 getComputedStyle 读取 CSS 自定义属性（即 CSS 变量）时，返回值**默认带首尾空格**是正常行为，不是 bug，而是规范明确规定的处理方式。
为什么 getComputedStyle 返回的 CSS 变量值有空格？
CSS 规范要求：自定义属性的值在解析后保留原始声明中的空白字符（包括换行、制表符、空格）。哪怕你写的是 --color: #fff;，浏览器内部仍按“声明值”处理，而 getComputedStyle 暴露的就是这个未加工的字符串值。
例如：
element.style.setProperty('--gap', '12px');
// 实际存入的是字符串 "12px"，但若写成：
element.style.setProperty('--gap', ' 12px ');
// 那么 getComputedStyle 就真会返回 " 12px "
即使你在 CSS 文件里写得非常干净，构建工具、CSS 压缩器或编辑器自动格式化也可能悄悄插入空格 —— 这些都会被保留。
立即学习“前端免费学习笔记（深入）”；
getComputedStyle 读取后必须手动 trim 吗？
绝大多数场景下，**必须**。因为后续做数值计算、比较、拼接时，空格会导致：
-
parseInt('--gap')返回NaN -
value === '12px'判断失败 -
Number(value)得到NaN - 传给
calc()或其他 CSS 函数时语法错误
推荐做法是立即用 .trim() 清理：
const style = getComputedStyle(element);
const gap = style.getPropertyValue('--gap').trim(); // ✅ 安全
注意：.trim() 只去首尾，不影响中间空格（比如 '12 px' 中间的空格不会动），这反而是合理的 —— 中间空格可能是单位分隔，不该误删。
有没有不带空格的替代读取方式？
没有标准替代方式。所有主流方法（getPropertyValue、style['--var']、CSSStyleDeclaration 直接访问）都返回原始字符串。
例外情况：
- 如果你用
CSS.supports('property', '--foo')，它只判断是否存在，不读值 - 如果变量值本身是函数式语法（如
var(--color, red)），浏览器已计算回退值，但依然带空格
所以别绕路，.trim() 是最轻量、最可靠、兼容性最好的解法。
容易忽略的坑：动态设置 + 立即读取时的空格残留
常见错误模式：
el.style.setProperty('--size', '2rem');
const size = getComputedStyle(el).getPropertyValue('--size');
// 此时 size 是 "2rem" —— 看似没空格，但别信
问题在于：一旦代码被压缩、CSS 被 PostCSS 处理、或团队协作中有人手写 --size: 2rem ;（注意分号前空格），空格就回来了。
更隐蔽的是换行：
el.style.setProperty('--size', `
2rem
`); // 字符串含 \n 和空格 → .trim() 不可省
结论：只要涉及 getPropertyValue，无条件加 .trim()，不要依赖“看起来干净”。
