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).

Just solved this issue with TypeScript:

const parseCSSNumericValue = (value: string, unit: string): number | undefined => {
	const match = value.match(new RegExp(`(-?\\d+)${unit}`))
	if (!match) return
	const [, g1] = match
	return Number(g1)
}

You have to provide a value like '10px' and a unit you want to catch, like 'px'.

const [x] = getComputedStyle(element).backgroundPosition.split(' ')
const pixels = parseCSSNumericValue(x, 'px')

It's because you do not want to get 10 when you want to parse pixels but there is a '10%'.