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

Question

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

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

这条线不起作用.

注意: 我必须在元素的calc值中连接多个变量和值.在保持将多个值串在一起的能力的同时,我可以做些什么来实现这一点？

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 )';