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