在JavaScript或JQuery中将百分比值转换为像素

Question

我有一个以百分比为单位的字符串值将分配给高度但在分配之前我需要扣除top（）得到的另一个高度，输出结果是NaN，我的代码如下：

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

因为valHeight是字符串，百分比和高度是像素，结果将是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);

<强>更新

由于您已使用＆＃39; 50％＆＃39;更新了您的帖子。值。如何做这种方法呢。

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

Answer 3

1. 您需要使用.offset()，因为jQuery中没有.top()方法

  

获取第一个元素的当前坐标，或者在匹配元素集中相对于文档设置每个元素的坐标。

1. valHeight应为数字

代码的

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