Como obter apenas parte numérica da propriedade CSS com jQuery?

Eu preciso fazer um cálculo numérico com base nas propriedades CSS. No entanto, quando eu uso isso para obter informações:

$(this).css('marginBottom')

retorna o valor '10px'. Existe um truque apenas para obter o número de peça do valor, não importa se é pxou %ou emou qualquer outra coisa?

Isso limpará todos os sem dígitos, sem pontos e sem sinal de menos da string:

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

ATUALIZADO para valores negativos

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

parseInt irá ignorar automaticamente as unidades.

Por exemplo:

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

Com o método de substituição, seu valor css é uma sequência e não um número.

Este método é mais limpo, simples e retorna um número:

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

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

Mesmo que marginBottom definido em em, o valor dentro de parseFloat acima será em px, pois é uma propriedade CSS calculada.

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

Eu uso um plugin jQuery simples para retornar o valor numérico de qualquer propriedade CSS única.

Aplica-se parseFloatao valor retornado pelo cssmétodo padrão do jQuery .

Definição de 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);

Vamos supor que você tenha uma propriedade na margem inferior definida como 20px / 20% / 20em. Para obter o valor como um número, existem duas opções:

Opção 1:

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

A função parseInt () analisa uma sequência e retorna um número inteiro. Não altere os 10 encontrados na função acima (conhecida como "raiz"), a menos que você saiba o que está fazendo.

A saída de exemplo será: 20 (se a margem inferior estiver definida em px) para% e em será exibida o número relativo com base no tamanho atual do elemento pai / fonte.

Opção 2 (eu pessoalmente prefiro esta opção)

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

A saída de exemplo será: 20 (se a margem inferior estiver definida em px) para% e em será exibida o número relativo com base no tamanho atual do elemento pai / fonte.

A função parseFloat () analisa uma sequência e retorna um número de ponto flutuante.

A função parseFloat () determina se o primeiro caractere na cadeia especificada é um número. Se for, analisa a sequência até chegar ao final do número e retorna o número como um número, não como uma sequência.

A vantagem da opção 2 é que, se você retornar números decimais (por exemplo, 20.32322px), receberá o número retornado com os valores atrás do ponto decimal. Útil se você precisar retornar números específicos, por exemplo, se sua margem inferior estiver definida em ou %

parseinttruncará quaisquer valores decimais (por exemplo, 1.5emfornece 1).

Tente uma replacefunção com regex, por exemplo

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

Id ir para:

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

A maneira mais simples de obter a largura do elemento sem unidades é:

target.width()

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

Você pode implementar este plugin jQuery muito simples :

Definição de Plugin:

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

É resistente a NaNvalores que podem ocorrer na versão antiga do IE (retornará 0)

Uso:

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

Aproveitar! :)

Para melhorar a resposta aceita, use o seguinte:

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

Se for apenas para "px", você também pode usar:

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

Deve remover as unidades enquanto preserva os decimais.

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

usar

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

que retornam uma matriz. o primeiro índice retorna o valor da margem inferior (exemplo 20 para 20 px ) e o segundo índice retorna a unidade da margem inferior (exemplo px para 20 px )