Javascript 获取没有“px”的样式值的数字；后缀
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8690463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get a number for a style value WITHOUT the "px;" suffix
提问by QuinnFreedman
I am making a RTS game in Javascript and HTML. Sounds ambitious I know but I'm not shooting for the stars here. Just a little something to keep me entertained.
我正在用 Javascript 和 HTML 制作 RTS 游戏。我知道这听起来很有野心，但我不是在这里为明星而拍摄。只是一些让我开心的小东西。
I am currently working on the movement part of the game. I have a movement engine that should work, but there is a problem. In my script I compare the current left and top values of an absolutely positioned character to those of its target (which may be moving) using inequality statements (>and <). The problem is that the feedback I get form document.getElementById(nameVar).style.leftis in the form of a string (e.g. 200px) not a number (e.g. 200), so the comparisons don't work.
我目前正在研究游戏的运动部分。我有一个应该可以工作的运动引擎，但是出现了问题。在我的脚本中，我使用不等式语句 ( >and <)将绝对定位字符的当前左值和上值与其目标（可能正在移动）的值进行比较。问题是我得到的反馈document.getElementById(nameVar).style.left是字符串形式（例如200px）而不是数字（例如200），所以比较不起作用。
My question is, is there any way to turn the string into a number that I can manipulate the way I want to? Either by using an altered address or by preforming some procedure with the feedback once I get it.
我的问题是，有什么方法可以将字符串转换为可以按我想要的方式操作的数字？要么使用更改过的地址，要么在收到反馈后执行一些程序。
Any help would be great.
任何帮助都会很棒。
回答by konsolenfreddy
parseIntgives you the numerical value:
parseInt给你数值：
var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);
or, as @PeteWilson suggests in the comments, use parseFloat
或者，正如@PeteWilson 在评论中建议的那样，使用 parseFloat
回答by David says reinstate Monica
An alternative approach to the one from Konsolenfreddy, is to use:
Konsolenfreddy的另一种方法是使用：
var numericValue = window
.getComputedStyle(document.getElementById('div'),null)
.getPropertyValue('left')
.match(/\d+/);
The benefit of this approach is that it works to retrieve the value set in CSS, regardless of that value being set in the styleattribute of the element or in a linked stylesheet, which I thinkKonsolenfreddy's approach is limited by.
这种方法的好处是它可以检索 CSS 中设置的值，而不管该值是在style元素的属性中还是在链接的样式表中设置的，我认为Konsolenfreddy的方法受到限制。
References:
参考：
回答by ThinkingStiff
You can use .offsetLeftand .offsetTopto get values without pxand the return type is numeric.
您可以使用.offsetLeft和.offsetTop来获取没有px的值，并且返回类型是数字。
Demo: http://jsfiddle.net/ThinkingStiff/2sbvL/
演示：http: //jsfiddle.net/ThinkingStiff/2sbvL/
Script:
脚本：
var result = document.getElementById( 'result' ),
position = document.getElementById( 'position' );
result.textContent = position.offsetLeft + ', ' + position.offsetTop;
HTML:
HTML：
<div id="position"></div>
<div id="result"></div>
CSS:
CSS：
#position {
border: 1px solid black;
height: 50px;
left: 50px;
position: absolute;
top: 50px;
width: 50px;
}
Output:
输出：
回答by Martin Melichar
You may also use:
您还可以使用：
element.getBoundingClientRect()
it returns DOMRect object (with some useful coordinates).
它返回 DOMRect 对象（带有一些有用的坐标）。
