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

Question

在jQuery中，您可以将相对于父级的顶部位置作为数字，但如果在px中设置，则无法将css顶部值作为数字。 说我有以下内容：

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

上测试小提琴