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

Necesito hacer un cálculo numérico basado en las propiedades CSS. Sin embargo, cuando uso esto para obtener información:

$(this).css('marginBottom')

devuelve el valor '10px'. ¿Hay un truco para conseguir justo el número de parte del valor, no importa si es pxo %o emo lo que sea?

Esto limpiará todos los dígitos, no puntos y no menos signos de la cadena:

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

ACTUALIZADO para valores negativos

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

parseInt ignorará automáticamente las unidades.

Por ejemplo:

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

Con el método replace, su 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 arriba estará en px, ya que es una propiedad CSS calculada.

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

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

Se aplica parseFloatal valor devuelto por el cssmétodo predeterminado de jQuery .

Definición de complemento:

$.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 de margen inferior 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.

El resultado de ejemplo será: 20 (si el margen inferior se establece en px) para% y em dará el número relativo en función del tamaño del elemento principal / fuente actual.

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

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

El resultado de ejemplo será: 20 (si el margen inferior se establece en px) para% y em dará el número relativo en función del tamaño del elemento principal / fuente actual.

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 de la cadena especificada es un número. Si es así, analiza la cadena hasta que alcanza el 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.32322px) obtendrá el número devuelto con los valores detrás del punto decimal. Útil si necesita que se devuelvan números específicos, por ejemplo, si su margen inferior está configurado en em o %

parseinttruncará cualquier valor decimal (por ejemplo, 1.5emda 1).

Pruebe una replacefunción con regex, p. Ej.

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

Id por:

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

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

target.width()

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

Puede implementar este complemento jQuery muy simple :

Definición de complemento:

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

Es resistente a los NaNvalores que pueden ocurrir en la versión anterior de IE (en su 0lugar, volverá )

Uso:

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

¡Disfrutar! :)

Para mejorar la respuesta aceptada, use esto:

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

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

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

Deben eliminar unidades mientras se conservan los decimales.

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

utilizar

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

que devuelven una matriz. el primer índice devuelve el valor del margen inferior (ejemplo 20 para 20px) y el segundo índice devuelve la unidad del margen inferior (ejemplo px para 20px)