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

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

$(this).css('marginBottom')

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

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

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

更新为负值

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

parseInt 将自动忽略单位。

例如：

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

使用replace方法时，css值是字符串，而不是数字。

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

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

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

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

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

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

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

选项1：

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

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

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

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

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

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

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

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

选项2的优点是，如果您获得返回的十进制数字（例如20.32322px），则将获得带有小数点后的值的返回数字。如果您需要返回特定的数字，例如，如果您的下边距设置为em或％，则很有用

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

尝试replace使用正则表达式的功能，例如

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

申请：

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

不使用单位获取元素宽度的最简单方法是：

target.width()

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

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

插件定义：

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

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

用法：

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

请享用！:)

为了改善可接受的答案，请使用以下命令：

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

如果仅用于“ px”，则还可以使用：

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

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

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

用

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

返回一个数组。第一个索引返回边距底部的值（例如20代表20像素），第二个索引返回边距底部的单位（例如px代表20px）

本文地址：http://javascript.askforanswer.com/ruheshiyongjqueryjinhuoqucssshuxingdeshuzibufen.html
文章标签：css , javascript , jquery , parsing
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载