Get css top value as number not as string?

In jQuery you can get the top position relative to the parent as a number, but you can not get the css top value as a number if it was set in px.
Say I have the following:

#elem{
position:relative;
top:10px;
}

<div>
Bla text bla this takes op vertical space....
<div id='elem'>bla</div>
</div>

$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'

But I want to have the css top property as the number 10.
How would one achieve this?

118419 次浏览
小开
最佳答案

You can use the parseInt() function to convert the string to a number, e.g:

parseInt($('#elem').css('top'));

Update: (as suggested by Ben): You should give the radix too:

parseInt($('#elem').css('top'), 10);

Forces it to be parsed as a decimal number, otherwise strings beginning with '0' might be parsed as an octal number (might depend on the browser used).

小开

A jQuery plugin based on M4N's answer

jQuery.fn.cssNumber = function(prop){
var v = parseInt(this.css(prop),10);
return isNaN(v) ? 0 : v;
};

So then you just use this method to get number values

$("#logo").cssNumber("top")
小开

A slightly more practical/efficient plugin based on Ivan Castellanos' answer (which was based on M4N's answer). Using || 0 will convert Nan to 0 without the testing step.

I've also provided float and int variations to suit the intended use:

jQuery.fn.cssInt = function (prop) {
return parseInt(this.css(prop), 10) || 0;
};


jQuery.fn.cssFloat = function (prop) {
return parseFloat(this.css(prop)) || 0;
};

Usage:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

Test fiddle on http://jsfiddle.net/TrueBlueAussie/E5LTu/

小开

Its not work for me ,also i got the Top as String and remove the Pixel

let item = document.querySelector('.myclass');


let IngTop = parseInt(getComputedStyle(item).top.replace('px',''));
.myclass{
top : 150px
}
<div class='myclass'></div>


提交答案