jQuery / Javascript - como faço para converter um valor de pixel (20px) em um valor numérico (20)

101

Eu sei que o jQuery tem um método auxiliar para analisar strings de unidades em números. Qual é o método jQuery para fazer isso?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;
javascript jquery John Himmelman
fonte
parseInt (a, 10); retornar NaN se a for uma string
vanduc1102

Respostas:

184

Não é necessário jQuery para isso, Plain Ol 'JS (tm) vai fazer você,

parseInt(a, 10);
Andy E
fonte
4
Todos os dias, em todos os sentidos, estou amando você cada vez mais javascript
James Westgate
1
Isso não funcionará para "20pt" ou "20em". parseInt ("20pt") == 20! Isso pode ser tudo de que o pôster precisa, mas eu gostaria de poder usar X ("20em") por exemplo e obter de volta a largura real em pixels.
Lawrence I. Siden de
2
@lsiden: funciona. parseInt("20em", 10) === 20e parseInt("20pt", 10) === 20. Sinta-se à vontade para colar qualquer uma das expressões no console do seu navegador favorito ou veja este pequeno exemplo . Qualquer problema que você esteja tendo está em outro lugar em seu código.
Andy E de
6
Uma nota secundária, a parseIntfunção realmente desconsiderará quaisquer caracteres não inteiros anexados ao final de uma string de caracteres inteiros. parseInt('234sdfsdf') == 234
Chris W.
3
@AndyE: Isiden estava dizendo que o parseInt não converterá os valores em (ou pt ou outros) nos valores de pixel equivalentes, que é o que algumas pessoas podem precisar.
LeartS
30

De forma mais geral, parseFloatprocessará números de ponto flutuante corretamente, enquanto parseIntpode perder silenciosamente dígitos significativos:

parseFloat('20.954544px')
> 20.954544
parseInt('20.954544px')
> 20
Roly
fonte
5 
 var c = parseInt(a,10);
unomi
fonte
5 
$.parseMethod = function (s)
{
    return Number(s.replace(/px$/, ''));
};

embora como isso está relacionado ao jQuery, eu não sei

apenas alguem
fonte
0

Desculpe pela escavação, mas:

var bar = "16px";

var foo = parseInt(bar, 10); // Doesn't work! Output is always 16px
// and
var foo = Number(s.replace(/px$/, '')); // No more!
Alain Mazy
fonte
parseInt ('16px', 10); trabalhe para mim no console de desenvolvimento do Google Chrome
Thomas,
-2 
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

Ao tentar identificar a variável x com um valor de pixel I usando jquery, coloquei + = entre aspas. Em vez de ter largura: '+ = x', o que não funciona porque pensa que x é uma string em vez de um número. Espero que isso ajude.

Elliot Suls
fonte