Get a number for a style value WITHOUT the "px;" suffix
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: