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

Question

我需要做一个基于CSS属性的数值计算。但是，当我使用它来获取信息时：

$(this).css('marginBottom') 

它返回值'10px'。有没有一种方法可以获得价值的数字部分，不管是px还是%或em或其他什么？

Answer 1

这将清理所有非数字，非点，并从字符串未减号：

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

更新的负值

Answer 2

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

Answer 3

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

即使marginBottom使用em定义，parseFloat内的值上方，将会在PX，因为它是一个计算的CSS属性。

Answer 4

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

parseInt会自动忽略这些单位。

例如：

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

Answer 5

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

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

Answer 6

parseint将截断任何十进制值（例如1.5em给出1）。

尝试replace函数与正则表达式 例如，

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

Answer 7

我使用一个简单的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 8

随着替代方法，你的CSS值是一个字符串，而不是数字。

这种方法更清洁，简单，并返回一个数字：

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

Answer 9

编号去：

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

Answer 10

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

target.width() 

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

Answer 11

使用

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

其返回的数组。 第一个索引返回余量底部的值（例如为20像素） 和第二索引返回缘底部的单元（例如PX为20像素）

Answer 12

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

插件定义：

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

这是耐在旧版本IE中可能发生的（将返回0代替）个值

用法：

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

享受！ :)

Answer 13

让我们假设您将margin-bottom属性设置为20px/20％/ 20em。要获得的值作为数有两种选择：

选项1：

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

的parseInt函数（）的函数把字符串，并返回一个整数。除非你知道你在做什么，否则不要改变上述函数中的10（称为“基数”）。

示例输出将为20（如果页边距设置为px）％和em，它会根据当前父元素/字体大小输出相对数。

选项2（I个人倾向于此选项）

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

示例输出将是：20（如果边距以像素组）为％和EM它将相对输出基于当前父元素/字体大小的数字。

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

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

选项2的优点是，如果得到返回的十进制数（例如20.32322px），您将得到小数点后面返回的数字。有用的，如果你需要，如果你的下边距在EM或％

Answer 14

设置为改善公认的答案用具体的数字返回，例如这样的：

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

Answer 15

如果它只是为“PX”你也可以使用：

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