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

【问题标题】：Using CSS calc() in JavaScript with a variable在带有变量的 JavaScript 中使用 CSS calc()
【发布时间】：2017-12-18 10:46:06
【问题描述】：

用户 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;

我包含了 alert 语句，以向自己保证字符串本身是正确的，它看起来是正确的。但是，没有出现所需的填充。

我正在做的事情是否有问题，还是无法做到这一点？

【问题讨论】：

只要你最终得到的字符串是一个有效的calc() 表达式，浏览器实际上是不可能区分的。你确定width的值包含“px”后缀吗？
当它是一个简单的像素减法时，为什么要使用 calc？
@Pointy 只要alert(pad) 行没有骗我，那么是的，我确定！
@epascarello 我知道我可以做到，但我觉得我尝试的方法不起作用。
它不起作用，因为警报中的内容不是您所拥有的... ;)

标签： javascript css

【解决方案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>

【讨论】：

啊哈！完美，这解决了它！我不知道这有什么不同，谢谢一百万！
所以 CSS calc() 解析器不将连字符视为标记？ (?!?)
@pointy - CSS calc() [annoyingly/confusingly] 要求所有运算符之间有一个空格 (+ \ * -)
@RichWerden 我猜这就是当你将外星语法插入现有语法时会发生的情况:)
很遗憾，我犯了这个错误，并且不止一次地创建了这个错误。

【解决方案2】：

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

这也应该有效。

【讨论】：

【解决方案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 错误。我错过了什么？就好像我把一个错误换成了另一个。

【讨论】：