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

问题是一个缺少字符的简单问题。没有它，没有填充，有它。

＆＃13;

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;

＆＃13;

div {
  background-color: red
}

＆＃13;

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

＆＃13;

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 错误。我错过了什么？这几乎就像我把一个错误换成了另一个。

在JavaScript中使用带有变量的CSS calc（）

3 个答案: