Get a number for a style value WITHOUT the "px;" suffix

I am trying to do some comparison logic about the positions of HTML elements. I have a system that I think should work, but there is a problem.

In my code I compare the current left and top values of one absolutely positioned element to those of another (which may be moving) using inequality statements (> and <). The problem is that the feedback I get form document.getElementById(nameVar).style.left is in the form of a string (e.g. 200px) not a number (e.g. 200), so the comparisons don't work.

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.

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

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.

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:

You may also use:

element.getBoundingClientRect()

it returns DOMRect object (with some useful coordinates).