通過在JavaScript中加入2個字符串來設置'calc（）'值不起作用

Question

這是我遇到的問題的一個簡單示例，但基本問題仍然存在：blue元素需要按照第3行中指定的樣式設置JavaScript但無法正常工作。我有幾個變量和字符串連接在這個元素的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)';