How to get just numeric part of CSS property with jQuery?

Question

I need to do a numeric calculation based on CSS properties. However, when I use this to get info:

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

it returns

Answer 1

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 %