Menu
Answer: Use the jQuery. isNumeric() method You can use the jQuery $. isNumeric() method to check whether a value is numeric or a number. The $. isNumeric() returns true only if the argument is of type number, or if it's of type string and it can be coerced into finite numbers, otherwise it returns false .
Get a CSS Property Value You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax: $(selector). css("propertyName");
First, you need to select the element with querySelector . Then, you use getComputedStyle to get the element's styles. If you log style , you should see an object that contains every CSS property and their respective values. You can also see this object in Chrome's and Firefox's dev tools.
You can change CSS using the jQuery css() method which is used for the purpose of getting or setting style properties of an element. Using this method you can apply multiple styles to an HTML all at once by manipulating CSS style properties.
parseInt($(this).css('marginBottom'), 10);
parseInt will automatically ignore the units.
For example:
var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10
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
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'));
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.
$(this).css('marginBottom').replace('px','')
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);
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 %
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With