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

Question

在jQuery中,您可以将相对于父级的顶部位置作为数字,但如果设置了,则无法将css顶部值作为数字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.
如何实现这一目标？

Answer 1

您可以使用parseInt()函数将字符串转换为数字,例如:

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

更新:(如Ben所建议的):你也应该给出基数:

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

强制将其解析为十进制数,否则以"0"开头的字符串可能会被解析为八进制数(可能取决于所使用的浏览器).

Answer 2

一个基于M4N答案的jQuery插件

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

那么您只需使用此方法获取数字值

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

Answer 3

基于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/上测试小提琴