Javascript 获取样式值的数字，但不带“0”；px&引用；后缀

我试图对HTML元素的位置做一些比较逻辑。我有一个系统，我认为应该工作，但有一个问题

---

在我的代码中，我使用不等式语句（

和

给出数值），将一个绝对定位元素的当前左值和顶值与另一个（可能正在移动）元素的左值和顶值进行比较：

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

或者，正如@PeteWilson在评论中所建议的，使用
parseFloat
一种替代方法，即使用：

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


这种方法的好处是，它可以检索CSS中的值集，而不管该值是在元素的
style
属性中设置的，还是在链接样式表中设置的，我认为这种方法受到限制

参考资料：







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

演示：

脚本：

var result=document.getElementById（'result'），
position=document.getElementById（'position'）；
result.textContent=position.offsetLeft+'，'+position.offsetTop；

HTML:



CSS:

#位置{
边框：1px纯黑；
高度：50px；
左：50px；
位置：绝对位置；
顶部：50px；
宽度：50px；
}

输出：

您还可以使用：

element.getBoundingClientRect()

它返回DOMRect对象（带有一些有用的坐标）。
还有一个问题：有时x和y值保留在部分像素中（至少在我的Firefox和Chrome XP机器上是这样）。parseInt（）会阻塞这些东西。我发现我不得不使用parseFloat（）而不是parseInt（）它工作得很好，同时也具有处理整数的额外的优点。也许这只是一个由我的特殊设置引起的意外。但是我已经让这个代码运行了六个月，没有问题。你可能想考虑使用PARSEFLAUT（）。我想文档。GETelEnMyByID（Navear）。风格。更有效一点如果您使用，请确保将
10
作为第二个参数传递。如果未传递，行为并不总是可预测的。
parseInt（x，10）
@IvanCastellanos 1）不进行微优化；2） 这仍然是一个字符串，而不是一个数字，因此，例如，
result+5
变成了
“2005”
，而不是
205
。谢谢。这有助于……）如果使用CSS转换，则当div移动时，offsetLeft与style.left属性不同。很抱歉投了反对票。您可能需要在最后添加一个
[0]
，以便通过以下方式访问值：
“10px”。替换（/[^0-9\.]+/g'，）\124; 0
→ <代码>10

或

10.px.匹配（/\d+/）[0]