This should not be the accepted answer because it does not answer the question correctly. The parseFloat/parseInt solutions are better. The question asks in regards to numeric calculations. This answer returns a string. That means that "20" + 20 = "2020" which is not good for anyone involved.
–
mastaBlastaOct 25 '13 at 17:44

That would handle only the 'px' case. So I guess a separate replace should be done for each of the remaining 'suffixes'.
–
Grzegorz OledzkiJul 8 '09 at 21:04

2

Be careful thought - the other suffixes are not in pixels, so if you expect px but are given em you need to convert.
–
ArielMay 3 '12 at 10:36

that's what I was thinking -- are there any library routines for this? Like I think it's a pretty reasonable condition to expect px, but for the purposes of robustness, what are our options...? (Just musing, here - I'm not going to bother too much with it since I control the values)
–
lolJul 10 '13 at 12:04

This is a good idea, but remember to watch out for side effects like calling a function of unknown cost more than necessary. var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
–
NickCApr 14 at 1:04

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 %