如何将calc()计算的CSS变量值获取到JavaScript中

嘿，我明白你遇到的问题了！你已经找对了获取CSS变量的方法，但可能是忽略了计算后的值处理细节，导致没法直接用在setTimeout里。咱们一步步来解决：

问题根源 #

用getComputedStyle(...).getPropertyValue('--loaderDuration')获取到的结果是带单位的字符串（比如"4400ms"，甚至可能带前后空格），而setTimeout需要的是纯数字类型的毫秒数，直接用的话会出错。

解决步骤 #

1. 获取并清理变量值：先拿到计算后的CSS变量值，去掉多余空格；
2. 提取数值并转换类型：把字符串里的ms单位去掉，转换成数字；
3. 代入定时器使用：把处理好的数字传给setTimeout。

修改后的完整代码 #

CSS（保持不变）

:root { 
  --loaderSpeed: 100ms; 
  --loaderDuration: calc(var(--loaderSpeed)*44); 
}

JavaScript（修改后）

// 获取计算后的CSS变量值，清理空格
const loaderDurationStr = getComputedStyle(document.documentElement)
  .getPropertyValue('--loaderDuration')
  .trim();

// 提取毫秒数值，转换成数字类型
const loaderDurationMs = parseInt(loaderDurationStr, 10);

// 使用处理后的数值
setTimeout(() => { 
  const box = document.getElementById('loaderWrapper'); 
  box.style.display = 'none'; 
}, loaderDurationMs);

额外注意点 #

• 如果你的CSS变量用的是秒（s）单位，记得要乘以1000转换成毫秒，比如：

  const loaderDurationS = parseFloat(loaderDurationStr);
  const loaderDurationMs = loaderDurationS * 1000;
  

• 用parseInt或者parseFloat都可以，这里因为是整数毫秒，parseInt更合适，加上第二个参数10确保十进制解析。

这样就能完美把CSS变量里的时长同步到JavaScript定时器里啦！

内容的提问来源于stack exchange，提问作者edwindharris