我需要基于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)
文章标签:css , javascript , jquery , parsing
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!