在帶變量的JavaScript中使用CSS calc（）

Question

用戶NickC詢問here是否可以使用CSS的calc（）函數在js中設置元素的位置（或類似樣式屬性）。

例子：

var pad = "calc(1250px - 1000px)"; 
element.style.paddingLeft = pad; 

這說明了我的網頁上就好了，但我想包括在功能一個js變量，像這樣：

var pad = "calc("+ width +"- 1000px)"; 
alert(pad); //displays calc(1250px - 1000px) 
element.style.paddingLeft = pad; 

我包括警報聲明，以確保自己的字符串本身是正確的，它似乎是。但是，沒有出現所需的填充。

我在做什麼還有問題，還是僅僅是無法做到這一點？

Answer 1

問題是一個簡單的問題，缺少字符。沒有它，沒有填充，它是存在的。

var width = '100px' 
 

 

 
var element1 = document.getElementById("test1") 
 
var element2 = document.getElementById("test2") 
 

 
var pad1 = "calc(" + width + "- 90px)"; //what you have 
 
var pad2 = "calc(" + width + " - 90px)"; //what it should be 
 

 
element1.style.paddingLeft = pad1; 
 
element2.style.paddingLeft = pad2;

div { 
 
    background-color: red 
 
}

<div id="test1"> 
 
    Hello 1 
 
</div> 
 
<div id="test2"> 
 
    Hello 2 
 
</div> 
 
<div> 
 
    Hello d 
 
</div>