在 JavaScript 中使用 CSS calc() 和变量

用户 NickC 询问here https://stackoverflow.com/questions/40871127/can-i-use-css-calc-withing-javascript是否可以使用 CSS 的 calc() 函数在 js 中设置元素的位置（或类似的样式属性）。

Example:

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;

我添加了警告语句，以确保字符串本身是正确的，看起来确实如此。但是，所需的填充并未出现。

我正在做的事情有问题吗，或者根本不可能做到这一点？

您遇到的问题是一个简单的问题，缺少特点。没有它就没有填充，有了它就有填充。

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>