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

Question

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.

Answer 1

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 2

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.