如何用jQuery获得CSS属性的数值部分?

I need to do a numeric calculation based on CSS properties. However, when I use this to get info:

我需要基于CSS属性进行数值计算。但是，当我用这个来获取信息的时候:

$(this).css('marginBottom')

it returns the value '10px'. Is there a trick to just getting the number part of the value no matter whether it is px or % or em or whatever?

它返回值'10px'。是否有一个技巧去获取值的数字部分不管它是px还是%或em还是别的什么?

15 个解决方案

#1

This will clean up all non-digits, non-dots, and not-minus-sign from the string:

这将清除字符串中的所有非数字、非圆点和非minus符号:

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

UPDATED for negative values

更新为负值

#2

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

parseInt will automatically ignore the units.

parseInt将自动忽略单元。

For example:

例如:

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

#3

With the replace method, your css value is a string, and not a number.

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

This method is more clean, simple, and returns a number :

该方法更简洁、简单，并返回一个数字:

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

#4

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

Even if marginBottom defined in em, the value inside of parseFloat above will be in px, as it's a calculated CSS property.

即使在em中定义了边际底部，上面的parseFloat的值也会在px中，因为它是一个计算过的CSS属性。

#5

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

#6

I use a simple jQuery plugin to return the numeric value of any single CSS property.

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

It applies parseFloat to the value returned by jQuery's default css method.

它对jQuery默认css方法返回的值应用parseFloat。

Plugin Definition:

插件定义:

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

Usage:

用法:

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

#7

parseint will truncate any decimal values (e.g. 1.5em gives 1).

parseint将截断任何十进制值(例如，1.5em给出1)。

Try a replace function with regex e.g.

尝试使用regex替换函数，例如。

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

#8

Id go for:

Id为:

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

#9

Let us assume you have a margin-bottom property set to 20px / 20% / 20em. To get the value as a number there are two options:

假设你的底边属性设置为20px / 20% / 20em。要获得一个数字的值，有两个选项:

Option 1:

选项1:

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

The parseInt() function parses a string and returns an integer. Don't change the 10 found in the above function (known as a "radix") unless you know what you are doing.

函数的作用是:解析一个字符串并返回一个整数。除非你知道你在做什么，否则不要改变上面的10个函数(称为“基数”)。

Example Output will be: 20 (if margin-bottom set in px) for % and em it will output the relative number based on current Parent Element / Font size.

示例输出将为:20(如果在px中设置了页边距)，表示%和em，它将基于当前父元素/字体大小输出相对数字。

Option 2 (I personally prefer this option)

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

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

Example Output will be: 20 (if margin-bottom set in px) for % and em it will output the relative number based on current Parent Element / Font size.

示例输出将为:20(如果在px中设置了页边距)，表示%和em，它将基于当前父元素/字体大小输出相对数字。

The parseFloat() function parses a string and returns a floating point number.

函数的作用是:解析一个字符串并返回一个浮点数。

The parseFloat() function determines if the first character in the specified string is a number. If it is, it parses the string until it reaches the end of the number, and returns the number as a number, not as a string.

函数的作用是:判断指定字符串中的第一个字符是否为数字。如果是，它将解析字符串，直到它到达数字的末尾，并将数字作为数字返回，而不是作为字符串返回。

The advantage of Option 2 is that if you get decimal numbers returned (e.g. 20.32322px) you will get the number returned with the values behind the decimal point. Useful if you need specific numbers returned, for example if your margin-bottom is set in em or %

选项2的优点是，如果返回的是十进制数(例如20.32322px)，则返回的数值将位于小数点后。如果您需要返回特定的数字，则有用，例如，如果您的margin-bottom设置在em或%中。

#10

The simplest way to get the element width without units is :

最简单的方法来获得单元宽度没有单位是:

target.width()

Source : https://api.jquery.com/width/#width2

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

#11

You can implement this very simple jQuery plugin:

你可以实现这个简单的jQuery插件:

Plugin Definition:

插件定义:

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

It is resistant to NaN values that may occur in old IE version (will return 0 instead)

它对旧IE版本中可能出现的NaN值具有抵抗力(将返回0)

Usage:

用法:

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

Enjoy! :)

享受吧!:)

#12

If it's just for "px" you can also use:

如果只是针对“px”，你也可以使用:

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

#13

For improving accepted answer use this:

为了提高被接受的答案，请使用以下方法:

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

#14

Should remove units while preserving decimals.

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

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

#15

use

使用

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

which return an array. first index returns margin bottom's value(example 20 for 20px) and second index returns margin bottom's unit(example px for 20px)

它返回一个数组。第一个索引返回页底的值(例如20代表20px)，第二个索引返回页底的单位(例如px代表20px)