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

javascript jquery css

2022-08-30 04:46:26

在 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

答案 1

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

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

更新：（如 Ben 所建议的）：您也应该给出基数：

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

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

答案 2

基于M4N答案的jQuery插件

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

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

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