在JavaScript或JQuery中將百分比值轉換爲像素

Question

我有一個以百分比爲單位的字符串值，它將分配給高度，但在分配之前我需要扣除top（）得到的另一個高度，輸出結果爲NaN，我的代碼是如下：

var valHeight = "50%"; 
var result = valHeight - $("#item").css("top"); 
$("#AnotherItem").height(result); 

作爲valHeight是字符串和百分比和高度是像素中的結果將是NaN。我該如何解決這個問題？ valHeight是百分比，但最高值是像素。我需要我的結果作爲百分比 讓我們澄清更多： 我想利用CSS的計算功能，我想下面的代碼是正確的：

$('#AnotherItem').css('height', valHeight).css('height', '-='+itemOffsetTop); 

唯一的問題是我想用在動畫中減去值功能。

Answer 1

我看到兩個問題與您的代碼：

1. valHeight是一個字符串，而不是數字。在數學運算中使用它之前，它必須是一個數字。
2. 這也不清楚你從哪裏得到.top()。也許你打算使用.offset().top？

例子：

var valHeight = 50; 
var result = valHeight - $("#item").offset().top; 
$("#AnotherItem").height(result + "px"); 

---

現在，你修改你的問題使用50%，它並沒有真正意義。如果你想要得到的結果是的$("#item").offset().top 50％，那麼你可以使用這樣的事情：

var valHeight = 0.5; 
var result = $("#item").offset().top * valHeight; 
$("#AnotherItem").height(result + "px"); 

Answer 2

1. 您需要使用.offset()，因爲在jQuery的

沒有方法 .top()

獲取第一個元素的當前座標，或設置匹配元素集合中每個元素相對於文檔的座標。

valHeight應爲數字

代碼

var valHeight = 50; //Or, parseInt("50px") 
var result = valHeight - $("#item").offset().top; 
$("#AnotherItem").height(result + "px"); 

Answer 3

首先

valHeight是需要將一個串將其轉換爲數字。

var varlHeight = parseInt("50px"); 

二

你$("#item").top()是無效的，而不是用這個。

$("#item").offset().top 

把它們放在一起

var valHeight=parseInt("50px"); 
var result= valHeight - $("#item").offset().top; 
$("#AnotherItem").height(result); 

更新

既然你已經更新了一個'50％」的值您的文章。如何改變這種做法呢。

var valHeight="50%"; 
var itemOffsetTop = $("#item").offset().top; 
$('#AnotherItem').css('height', valHeight).css('height', '-='+itemOffsetTop);