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

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

$(this).css('marginBottom')

它返回值‘10px’。不管是 px还是 %或者 em或者其他什么，是否有一个获得值的数部分的诀窍？

134219 次浏览
小开 
$(this).css('marginBottom').replace('px','')
小开 
parseFloat($(this).css('marginBottom'))

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

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

parseInt 将自动忽略单位。

例如:

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

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

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

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

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

负值更新

小开

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

尝试使用正则表达式执行 replace函数 例如:。

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

我使用一个简单的 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);
小开

通过替换方法，您的 css 值是一个字符串，而不是一个数字。

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

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

我选:

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

获得不含单位的元素宽度的最简单方法是:

target.width()

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

小开

使用

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

返回一个数组。 第一个索引返回边距底部的值(例如20px 的 20) 第二个索引返回边距底部的单位(例如 Px为20px)

小开

你可以实现这个非常简单的 JQuery插件:

插件定义:

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

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

用法:

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

享受吧! :)

小开

让我们假设您有一个边距底部属性设置为20px/20%/20em。要获得作为数字的值，有两种选择:

选择1:

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

函数 parseInt ()解析一个字符串并返回一个整数。除非您知道自己在做什么，否则不要更改上面函数中的10(称为“基数”)。

示例输出 将是: 20(如果在 px 中设置边距底部)% ，em 将根据当前 Parent Element/Font size 输出相对数字。

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

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

示例输出 将是: 20(如果在 px 中设置边距底部)% ，em 将根据当前 Parent Element/Font size 输出相对数字。

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

ParseFloat ()函数确定指定字符串中的第一个字符是否为数字。如果是，它将解析字符串直到到达数字的末尾，并以数字而不是字符串的形式返回数字。

选项2的优点是，如果返回的是十进制数(例如20.32322 px) ，那么返回的数值就是小数点后面的值。如果您需要返回特定的数字，例如，如果您的边距底部设置在 Em或 %

小开

为了提高公认的答案，使用以下方法:

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

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

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

提交答案