Get a number for a style value WITHOUT the “px;” suffix

Question

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.

I

Answer 1

You may also use:

element.getBoundingClientRect()

it returns DOMRect object (with some useful coordinates).

Answer 2

parseInt gives you the numerical value:

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

or, as @PeteWilson suggests in the comments, use parseFloat

Answer 3

An alternative approach to the one from Konsolenfreddy, is to use:

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

JS Fiddle demo.

The benefit of this approach is that it works to retrieve the value set in CSS, regardless of that value being set in the style attribute of the element or in a linked stylesheet, which I think Konsolenfreddy's approach is limited by.

References:

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

Answer 4

You can use .offsetLeft and .offsetTop to get values without px and the return type is numeric.

Demo: http://jsfiddle.net/ThinkingStiff/2sbvL/

Script:

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;
}

Output: