jQuery / Javascript - ¿Cómo convierto un valor de píxel (20px) a un valor numérico (20)

101

Sé que jQuery tiene un método auxiliar para analizar cadenas de unidades en números. ¿Cuál es el método jQuery para hacer esto?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;
javascript jquery John Himmelman
fuente
parseInt (a, 10); devolver NaN si a es una cadena
vanduc1102

Respuestas:

184

No se requiere jQuery para esto, Plain Ol 'JS (tm) te servirá,

parseInt(a, 10);
Andy E
fuente
4
Todos los días en todos los sentidos Im amarte más y más javascript
James Westgate
1
Esto no funcionará para "20pt" o "20em". parseInt ("20pt") == 20! Esto puede ser todo lo que necesita el póster, pero me gustaría poder usar X ("20em"), por ejemplo, y recuperar el ancho real en píxeles.
Lawrence I. Siden
2
@lsiden: funciona. parseInt("20em", 10) === 20y parseInt("20pt", 10) === 20. Siéntase libre de pegar cualquiera de las expresiones en la consola de su navegador favorito, o vea este breve ejemplo . Cualquier problema que tenga se encuentra en otra parte de su código.
Andy E
6
Una nota al margen, la parseIntfunción en realidad ignorará cualquier carácter no entero agregado al final de una cadena de caracteres enteros. parseInt('234sdfsdf') == 234
Chris W.
3
@AndyE: Isiden decía que parseInt no convertirá los valores em (o pt u otros) en los valores de píxeles equivalentes, que es lo que algunas personas pueden necesitar.
LeartS
30

De manera más general, parseFloatprocesará números de punto flotante correctamente, mientras que parseIntpuede perder silenciosamente dígitos significativos:

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

aunque cómo se relaciona esto con jQuery, no lo sé

solo alguien
fuente
0

Perdón por la excavación, pero:

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
fuente
parseInt ('16px', 10); trabajar para mí en la consola de desarrollo de Google Chrome
Thomas
-2 
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

Al tratar de identificar la variable x con un valor de píxel, usando jquery, pongo + = entre comillas. En lugar de tener ancho: '+ = x', que no funciona porque piensa que x es una cadena en lugar de un número. Ojalá esto ayude.

Elliot Suls
fuente