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

Answer 2

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

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

更新负值

Answer 3

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

此方法更干净，更简单，并返回一个数字：

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

Answer 4

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

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

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：


store.widgets.reverse.each(&:destroy)

parseInt（）函数解析字符串并返回一个整数。除非你知道自己在做什么，否则不要改变上述功能中的10个（称为＆＃34;基数＆＃34;）。

对于％和em，

示例输出将为：20（如果在px中设置margin-bottom），它将根据当前父元素/字体大小输出相对数字。

选项2 （我个人更喜欢这个选项）

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

对于％和em，

示例输出将为：20（如果在px中设置margin-bottom），它将根据当前父元素/字体大小输出相对数字。

parseFloat（）函数解析一个字符串并返回一个浮点数。

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

选项2的优点是，如果您返回十进制数字（例如20.32322px），您将获得返回的数字，其中包含小数点后面的值。如果您需要返回特定数字，则非常有用，例如，如果您的保证金底部设置为 em 或％

Answer 8

parseint将截断任何小数值（例如1.5em给出1）。

使用正则表达式尝试replace函数 e.g。

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');

Answer 9

我想去：

Math.abs(parseFloat($(this).css("property")));

Answer 10

获取没有单位的元素宽度的最简单方法是：

target.width()

来源：https://api.jquery.com/width/#width2

Answer 11

您可以实现这个非常简单的 jQuery 插件：

插件定义：

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

它可以抵抗旧IE版本中可能出现的NaN值（将返回0）

<强>用法：

$(this).cssValue('marginBottom');

享受！：）

Answer 12

For improving accepted answer use this:

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

Answer 13

如果它仅仅用于＆＃34; px＆＃34;你也可以使用：

$(this).css('marginBottom').slice(0, -2);

Answer 14

应该在保留小数的同时删除单位。

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));

Answer 15

使用

$(this).cssUnit('marginBottom');

返回一个数组。第一个指数返回保证金底部的值（示例 20 表示20px）第二个指数返回保证金底部的单位（例如 px 表示20px）

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

15 个答案: