Javascript - event.clientX 和 style.left - 数学运算

Question

我在这里遇到了一个小问题。让我解释一下:

document.getElementById(" ... ").style.left (对象的水平位置)将返回如下值:100px或1129px .

event.clientX (鼠标指针的水平位置)将返回如下值:100或1337 。

我想让数学在这两者之间发生。例如:var x = ( document.getElementById(" ... ").style.left ) + (event.clientX )

当返回值 px 时，我该怎么做？另一个没有？我怎样才能从中得到一个常规的数字/像素数？仅添加 (event.clientX) + "px" 似乎不起作用或document.getElementById(" ... ").style.left - "px"

最诚挚的问候!如果有不清楚的地方请评论!

Answer 1

对字符串进行加法将使 Javascript 尝试连接它们而不是进行实际的数学运算。对包含数字以外的字符的字符串进行减法将导致 Javascript 尝试将它们转换为数字失败，并给出 NaN。

您需要使用 parseInt 将 document.getElementById("... ").style.left 给定的字符串转换为整数。 parseInt 将方便地忽略非数字字符，例如“px”中的字符。

因此，如果w = document.getElementById("... ").style.left，您可以通过执行parseInt(w)获取以像素为单位的数字。您可以使用 parseInt 返回的值进行数学计算，因为它将是一个整数。