¿Cómo obtener solo una parte numérica de la propiedad CSS con jQuery?

parseInt($(this).css('marginBottom'), 10);

parseInt automáticamente ignorar las unidades.

Por ejemplo:

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10

Con el método replace, el valor css es una cadena y no un número.

Este método es más limpio, simple, y devuelve un número:

parseFloat($(this).css('marginBottom'));

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

Incluso si marginBottom se define en em, el valor dentro de parseFloat anterior estará en px, ya que es una propiedad CSS calculada.

$(this).css('marginBottom').replace('px','')

Utilizo un plugin jQuery simple para devolver el valor numérico de cualquier propiedad CSS.

Aplica parseFloat al valor devuelto por el método predeterminado de jQuery css.

Definición del plugin:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

Uso:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

Supongamos que tiene una propiedad margin-bottom establecida en 20px / 20% / 20em. Para obtener el valor como un número hay dos opciones:

Opción 1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

La función parseInt() analiza una cadena y devuelve un entero. No cambie los 10 que se encuentran en la función anterior (conocida como "radix") a menos que sepa lo que está haciendo.

Ejemplo de salida será: 20 (si margen-fondo establecido en px) para % y em dará salida al número relativo basado en la corriente Elemento principal / Tamaño de fuente.

Opción 2 (yo personalmente prefiero esta opción)

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

Ejemplo de salida será: 20 (si margen-fondo establecido en px) para % y em mostrará el número relativo basado en el Elemento Padre actual / Tamaño de fuente.

La función parseFloat() analiza una cadena y devuelve un número de coma flotante.

La función parseFloat() determina si el primer carácter en la cadena especificada es un número. Si lo es, es analiza la cadena hasta que llega al final del número, y devuelve el número como un número, no como una cadena.

La ventaja de la opción 2 es que si obtiene números decimales devueltos (por ejemplo, 20.32322 px) obtendrá el número devuelto con los valores detrás del punto decimal. Útil si necesita números específicos devueltos, por ejemplo, si su margen inferior está establecido en em o %

parseint truncará cualquier valor decimal (por ejemplo, 1.5em da 1).

Pruebe una función replace con expresiones regulares por ejemplo,

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');

Id ir para:

Math.abs(parseFloat($(this).css("property")));

La forma más sencilla de obtener el ancho del elemento sin unidades es :

target.width()

Fuente : https://api.jquery.com/width/#width2

Puede implementar este complemento muy simple jQuery:

Definición del plugin:

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

Es resistente a NaN valores que pueden ocurrir en la versión anterior de IE (devolverá 0 en su lugar)

Uso:

$(this).cssValue('marginBottom');

Disfrute! :)

Si es solo para " px " también puedes usar:

$(this).css('marginBottom').slice(0, -2);

Para mejorar la respuesta aceptada use esto:

Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));

Debe eliminar unidades conservando decimales.

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));

Use

$(this).cssUnit('marginBottom');

Que devuelven un array. el primer índice devuelve el valor del margen inferior(ejemplo 20 para 20px) y segundo índice devuelve la unidad de margen inferior (ejemplo px para 20px)