変数のJavaScriptでCSS calc（）を使用する

Question

ユーザのNickCは、CSSのcalc（）関数を使用してjsに要素の位置（または同様のスタイルプロパティ）を設定できるかどうかを尋ねます。here

例：

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

これは私のWebページ上だけで罰金を示しているが、私は機能に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>