获取CSS最高值作为数字而不是字符串？

在jQuery中，您可以将相对于父对象的最高位置作为一个数字来获取，但是如果将css top值设置为，则无法将其作为一个数字来获取px。
说我有以下几点：

#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'

但是我想将css top属性作为数字10。
一个人将如何实现这一目标？

您可以使用parseInt（）函数将字符串转换为数字，例如：

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

更新：（如本建议的那样）：您也应该提供基数：

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

强制将其解析为十进制数，否则可能将以“ 0”开头的字符串解析为八进制数（可能取决于所使用的浏览器）。

一个基于M4N答案的jQuery插件

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

因此，您只需使用此方法即可获取数字值

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

基于Ivan Castellanos的答案（基于M4N的答案）的实用性/效率更高的插件。使用|| 0会将Nan转换为0，而无需测试步骤。

我还提供了float和int变体以适合预期的用途：

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

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

用法：

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

在http://jsfiddle.net/TrueBlueAussie/E5LTu/上测试小提琴