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

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');

Answer 2

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'));

Answer 3

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);