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

Question

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

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

由於valHeight是字符串，％和height是像素，結果將為NaN 。 我該如何解決這個問題？ valHeight是百分比，但最高值是像素。 我需要以百分比表示結果。讓我們進一步闡明：我想使用CSS的calc函數，並且我猜下面的代碼是正確的：

$('#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

第一

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);

Answer 3

1. 您需要使用.offset()因為沒有方法.top() jQuery中

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

2. valHeight應該是一個數字

碼

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