得到的CSS最高价值作为数字不是string？

在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顶级属性为10 。
如何做到这一点？

Answer 1

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

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

更新:(根据Ben的build议）：你也应该给出基数：

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

强制将其parsing为十进制数，否则以“0”开头的string可能会被parsing为八进制数（可能取决于所使用的浏览器）。

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 || 0将无需testing步骤就将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'); // eg returns 123 as an int $('#elem').cssFloat('top'); // eg Returns 123.45 as a float 

在http://jsfiddle.net/TrueBlueAussie/E5LTu/上testing小提琴;