获取没有"px"的样式值的数字 后缀

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小提琴演示.

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

参考文献:

• window.getComputedStyle().
• document.getElementById().
• match().
• CSSStyleDeclaration.getPropertyValue()
• 正则表达式.

Answer 3

您还可以使用：

element.getBoundingClientRect()

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

Answer 4

您可以使用.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;
}

输出：