javascript - 在 JS 中使用 CSS 属性 calc()

Question

我需要使用 css calc() 属性来置换屏幕上的元素。如果我通过 CSS 执行此操作，效果很好，但是此 CSS 属性需要置换 50% - 一个在 JS 中计算出的变量。

看这个例子:

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

但是，当它运行时，它不会应用于页面上的 HTML 元素。为了澄清这确实适用于其他东西，如果我输入:

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

这会起作用，我已经对其进行了测试并且它适用。这意味着通过 JS 将 calc() 应用于 css 元素时存在问题。也许这就是我将变量连接到 calc() 中的方式。

有人有什么建议吗？

Answer 1

减号后面需要一个空格:

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

Fiddle here