使用CSS屬性calc（）和JS

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

Answer 2

的+和-運營商必須始終由空格包圍。所以你必須在這裏增加額外的空間：

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