JS中的rem单位是怎么计算的？

Question

const someHeight = "3rem";
example.style.padding = `calc(${someHeight} + 2rem)`;

内联样式的结果：padding: calc(5rem)。

我的预期结果是：padding: calc(3rem + 2rem)。

calc() 的结果好像是 JS 计算出来的。为什么会这样？而如果JS可以添加两个rem值，为什么这行不通呢？

example.style.padding = `${someHeight} + 2rem`

Answer 1

好像calc()的结果是JS计算出来的。

不是由 JavaScript 代码，不是；通过浏览器。 style 对象不是一个简单的容器。当您为其上分配属性时，浏览器会处理这些属性，当您查看它们的值时，这些值不一定与您分配它们时的形式相同。例如，如果您先查看example.style.color = "#020202"，然后查看example.style.color，您可能会看到rgb(2, 2, 2) 或类似内容（因浏览器而异）：

const example = document.getElementById("example");
example.style.color = "#020202";
console.log(example.style.color); // rgb(2, 2, 2) on Chrome

<div id="example"></div>

这是同样的事情，如果你分配calc(3rem + 2rem)，由于这些单位是相同的，所以在将值返回给你时，浏览器将它们组合起来也就不足为奇了：

const example = document.getElementById("example");
example.style.padding = "calc(3rem + 2rem)";
console.log(example.style.padding); // calc(5rem) on Chrome

<div id="example"></div>

通过将结果写入变量，您可以看到不是 JavaScript 代码在执行此操作：

const example = document.getElementById("example");
const someHeight = "3rem";
const padding = `calc(${someHeight} + 2rem)`;
console.log(padding);               // calc(3rem + 2rem)
example.style.padding = padding;
console.log(example.style.padding); // calc(5rem) on Chrome

<div id="example"></div>