自定义CSS属性使用calc()未正确计算，问题出在哪？

我在自定义CSS属性和标准属性left中使用了完全相同的calc()表达式，但通过JavaScript打印时，自定义属性并没有像标准属性那样被正确计算。

我的CSS代码：

.note {
  --qq: calc(10px + 100px);
  left: calc(10px + 100px);
}

用于打印的JavaScript代码：

console.log("qq = ", getComputedStyle(qqq).getPropertyValue('--qq'))
console.log("left = ", getComputedStyle(qqq).getPropertyValue('left'))

控制台实际输出：

qq = calc(10px + 100px)
left =  110px

我预期的输出是：

qq = 110px
left = 110px

请问这是哪里操作错了？

原因说明 #

这不是操作错误，是CSS自定义属性（CSS变量）的固有设计规则：

• 自定义属性的核心作用是存储原始值，不会主动解析计算calc()表达式，它会原样保存你编写的内容。
• 标准CSS属性（比如left）属于特定的属性上下文，浏览器会在解析该属性时自动计算calc()表达式，得到最终的计算值。

解决方法 #

如果想获取自定义属性对应的计算值，可以用以下两种方式：

1. 通过标准属性间接获取
   修改CSS，将自定义属性赋值给一个标准属性，再通过getComputedStyle获取该标准属性的值：

   .note {
     --qq: calc(10px + 100px);
     left: var(--qq); /* 用自定义属性赋值给left */
   }
   

   此时用JS获取left就能得到计算后的110px，等同于自定义属性的实际计算结果。

2. JavaScript手动计算
   提取自定义属性的原始值后，手动处理calc()表达式进行计算（注意：仅适用于简单场景，复杂表达式需额外处理单位和运算逻辑，且eval存在安全风险，不可用于不可信来源的内容）：

   const qqq = document.querySelector('.note');
   const rawVarValue = getComputedStyle(qqq).getPropertyValue('--qq').trim();
   // 移除calc()包裹，提取运算表达式
   const expr = rawVarValue.replace(/^calc\(/, '').replace(/\)$/, '');
   // 计算结果
   const computedValue = eval(expr);
   console.log("qq = ", `${computedValue}px`); // 输出 qq = 110px
   

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