在 JavaScript 中使用带有变量的 CSS calc()

Question

用户 NickC 在这里询问是否可以使用 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>

Answer 2

var pad = `calc(${width} - 90px)`

这也应该有效。

Answer 3

我终于明白了，或者我想：

window.onload = function() { resize(); }
window.onresize = function() { resize(); }

function resize() {
if (window.innerWidth >= 992){
    var H = window.innerHeight;
    H = H  - 250;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H;
}
else if (window.innerWidth >= 768 && window.innerWidth <= 991){
    
    var H = window.innerHeight;
    H = H  - 237;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H;  
}
else if (window.innerWidth >= 480 && window.innerWidth <= 767){
   
    var H = window.innerHeight;
    H = H  - 217;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H; 
}
else if (window.innerWidth <= 479){
    
    var H = window.innerHeight;
    H = H  - 201;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H; 
}
}

我不明白的是为什么手机上的页脚远高于页面底部。 我认为 javascript 的 window.innerHeight 应该可以解决 CSS 中的 100vh 错误。 我错过了什么？ 这几乎就像我把一个错误换成了另一个。