获取一个样式值的数字，不用＆＃34; px;＆＃34;后缀

Question

我正在使用Javascript和HTML制作RTS游戏。听起来雄心勃勃我知道，但我不是在这里为明星射击。只是一些让我受理的东西。

我目前正致力于游戏的运动部分。我有一个应该工作的运动引擎，但是有一个问题。在我的脚本中，我使用不等式语句（>和<）将绝对定位字符的当前左侧和顶部值与其目标（可能正在移动）的左侧和顶部值进行比较。问题是，我从document.getElementById(nameVar).style.left获得的反馈是字符串形式（例如200px）而不是数字（例如200），因此比较不起作用

我的问题是，有没有办法将字符串变成一个我可以按照我想要的方式操作的数字？通过使用更改的地址或通过反馈预先形成一些程序。

任何帮助都会很棒。

Answer 1

parseInt为您提供数值：

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

或者，正如@PeteWilson在评论中建议的那样，使用parseFloat

Answer 2

来自Konsolenfreddy的替代方法是使用：

var numericValue = window
    .getComputedStyle(document.getElementById('div'),null)
    .getPropertyValue('left')
    .match(/\d+/);

JS Fiddle demo

这种方法的好处是它可以检索CSS中的值集，无论在元素的style属性中设置的值还是链接的样式表中，我认为< / em> Konsolenfreddy的方法受到限制。

参考文献：

• window.getComputedStyle()。
• document.getElementById()。
• match()。
• CSSStyleDeclaration.getPropertyValue()
• Regular Expressions。

Answer 3

您可以使用.offsetLeft和.offsetTop获取不含px的值，并且返回类型为数字。

演示：http://jsfiddle.net/ThinkingStiff/2sbvL/

脚本：

var result = document.getElementById( 'result' ),
    position = document.getElementById( 'position' );

result.textContent = position.offsetLeft + ', ' + position.offsetTop;

HTML：

<div id="position"></div>
<div id="result"></div>

CSS：

#position {
    border: 1px solid black;
    height: 50px;
    left: 50px;
    position: absolute;
    top: 50px;
    width: 50px;
}

输出：

Answer 4

您还可以使用：

element.getBoundingClientRect()

它返回DOMRect对象（带有一些有用的坐标）。