在JS中使用CSS属性calc（）

Question

我需要使用css calc（）属性来替换屏幕上的元素。如果我通过CSS做到这一点工作正常但是这个CSS属性需要被替换50％ - 一个变量在JS中得到了解决。

见这个例子：

var displace = childHeight / 2
parent.css({'top': 'calc( 50% -' + displace + 'px)'});

但是，当它运行时，它不会应用于页面上的HTML元素。为了澄清这个DOES可以与其他东西一起使用，如果我输入：

parent.css({'top': '50px'});

这样可行，我已对其进行测试并适用。这意味着将calc（）通过JS应用于css元素存在问题。也许这是我将变量连接到calc（）的方式。

有人有什么建议吗？

Answer 1

在减号后面需要一个空格：

var displace = childHeight / 2;
$(".test").css({'top': 'calc(50% - ' + displace + 'px)'});

Fiddle here

Answer 2

+和-运算符必须始终用空格包围。所以你必须在这里添加一个额外的空间：

//                             |-  === HERE ===
parent.css({'top': 'calc( 50% - ' + displace + 'px)'});