javascript - 通过在 JavaScript 中连接 2 个字符串来设置 'calc()' 值不起作用

Question

这是我遇到的问题的一个简单示例，但基本问题仍然存在:blue 元素需要按照 JavaScript 中第 3 行指定的样式进行设置，但无法正常工作。我有一些变量和字符串要连接到该元素的 height 值中。 red 元素呈现正确，但为什么当我像这样连接值时蓝色元素不起作用，我该如何解决？

blue.style.height = 'calc( 100% -' + '2rem )';

这条线不工作。

注意: 我必须在一个元素的计算值中连接多个变量和值。在保持将多个值串在一起的能力的同时，我该怎么做才能让它发挥作用？

var red = document.querySelector( '.red' ),
    green = document.querySelector( '.green' ),
    blue = document.querySelector( '.blue' );

red.style.height = 'calc( 100% - 2rem )';
blue.style.height = 'calc( 100% -' + '2rem )';

* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background-color: #f8f8f8;
}
div {
  width: 5rem;
  height: 5rem;
}
.red {
  background-color: #e44;
}
.green {
  background-color: #4d4;
}
.blue {
  background-color: #0dd;
}

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

Answer 1

您的连接字符串缺少空格，因此 -2rem 被解析为负值。

blue.style.height = 'calc( 100% - ' + '2rem )';