How to get just numeric part of CSS property with jQuery?
JavascriptJqueryCssParsingJavascript Problem Overview
I need to do a numeric calculation based on CSS properties. However, when I use this to get info:
$(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?
Javascript Solutions
Solution 1 - Javascript
parseInt($(this).css('marginBottom'), 10);
parseInt
will automatically ignore the units.
For example:
var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10
Solution 2 - Javascript
This will clean up all non-digits, non-dots, and not-minus-sign from the string:
$(this).css('marginBottom').replace(/[^-\d\.]/g, '');
UPDATED for negative values
Solution 3 - Javascript
With the replace method, your css value is a string, and not a number.
This method is more clean, simple, and returns a number :
parseFloat($(this).css('marginBottom'));
Solution 4 - Javascript
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.
Solution 5 - Javascript
$(this).css('marginBottom').replace('px','')
Solution 6 - Javascript
I use a simple jQuery plugin to return the numeric value of any single CSS property.
It applies parseFloat
to the value returned by jQuery's default css
method.
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);
Solution 7 - Javascript
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:
Option 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.
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.
Option 2 (I personally prefer this option)
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.
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 %
Solution 8 - Javascript
parseint
will truncate any decimal values (e.g. 1.5em
gives 1
).
Try a replace
function with regex
e.g.
$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');
Solution 9 - Javascript
Id go for:
Math.abs(parseFloat($(this).css("property")));
Solution 10 - Javascript
The simplest way to get the element width without units is :
target.width()
Source : https://api.jquery.com/width/#width2
Solution 11 - Javascript
You can implement this very simple jQuery plugin:
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)
Usage:
$(this).cssValue('marginBottom');
Enjoy! :)
Solution 12 - Javascript
For improving accepted answer use this:
Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));
Solution 13 - Javascript
If it's just for "px" you can also use:
$(this).css('marginBottom').slice(0, -2);
Solution 14 - Javascript
Should remove units while preserving decimals.
var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));
Solution 15 - Javascript
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)