如何使用jQuery获取CSS属性的数字部分？

Question

我需要根据CSS属性进行数值计算.但是,当我用它来获取信息时:

$(this).css('marginBottom')

它返回值'10px'.有没有窍门刚开值的数字部分无论是px或%或em或什么？

Answer 1

parseInt($(this).css('marginBottom'), 10);

parseInt 将自动忽略单位.

例如:

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10

您可能希望使用**[parseFloat](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat)**而不是`parseInt`来说明您收到非整数的情况价值 - 如[maximelebreton的回答](http://stackoverflow.com/a/4896719/177710). (46认同)
如果您使用此解决方案,您可能希望将基数(10)添加到parseInt. (3认同)
实际上,parseInt不需要",10"基数参数,因为10是默认值.较少的参数=更好的可读性,更短的代码,更少的错误. (3认同)
10只是parseInt的默认值,如果数字不能被解释为八进制(例如'0700'将解析为448而不是700,这可能是所希望的). (2认同)

Answer 2

这将清除字符串中的所有非数字,非点和非减号:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

更新为负值

考虑使用**[parseFloat](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat)**来处理**浮点数中允许的所有**字符,并返回**数字**而不是字符串 - 请参阅[maximelebreton的答案](http://stackoverflow.com/a/4896719/177710). (37认同)
这不应该是公认的答案,因为它没有正确回答问题.parseFloat/parseInt解决方案更好.问题是关于**数值计算**.这个答案返回一个字符串.这意味着"20"+ 20 ="2020"这对任何参与者都不利. (5认同)
如果您没有处理负数,这很好.我不是正则表达式大师所以无法提供更好的样本:) (4认同)

Answer 3

使用replace方法,您的css值是一个字符串,而不是数字.

这个方法更干净,简单,并返回一个数字:

parseFloat($(this).css('marginBottom'));

Answer 4

parseFloat($(this).css('marginBottom'))

即使margin中定义了marginBottom,上面parseFloat中的值也将以px为单位,因为它是一个计算出来的CSS属性.

[parseFloat](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat)只有一个参数 - 你在这里提供的基数(10)将被忽略.所以更正确的答案是[maximelebreton's](http://stackoverflow.com/a/4896719/177710). (3认同)

Answer 5

$(this).css('marginBottom').replace('px','')

Answer 6

我使用一个简单的jQuery插件来返回任何单个CSS属性的数值.

它适用parseFloat于jQuery默认css方法返回的值.

插件定义:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

用法:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

Answer 7

我们假设您将margin-bottom属性设置为20px/20%/ 20em.要将值作为数字获取,有两个选项:

选项1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

parseInt()函数解析字符串并返回一个整数.除非你知道自己在做什么,否则不要更改上述功能中的10(称为"基数").

示例输出将为:20(如果在px中设置margin-bottom)对于%和em,它将根据当前父元素/字体大小输出相对数.

选项2 (我个人更喜欢这个选项)

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

示例输出将为:20(如果在px中设置margin-bottom)对于%和em,它将根据当前父元素/字体大小输出相对数.

parseFloat()函数解析字符串并返回浮点数.

parseFloat()函数确定指定字符串中的第一个字符是否为数字.如果是,则解析字符串直到它到达数字的末尾,并将数字作为数字返回,而不是字符串.

选项2的优点是,如果您返回十进制数字(例如20.32322px),您将获得返回的数字,小数点后面的值.如果您需要返回特定数字,则非常有用,例如,如果您的保证金底部设置为em或%