jQuery / Javascript - Comment convertir une valeur de pixel (20px) en une valeur numérique (20)

101

Je sais que jQuery a une méthode d'aide pour analyser les chaînes d'unité en nombres. Quelle est la méthode jQuery pour faire cela?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;
javascript jquery John Himmelman
la source
parseInt (a, 10); retourne NaN si a est une chaîne
vanduc1102

Réponses:

184

Aucun jQuery requis pour cela, Plain Ol 'JS (tm) vous le fera,

parseInt(a, 10);
Andy E
la source
4
Everyday in Everyway Je t'aime de plus en plus javascript
James Westgate
1
Cela ne fonctionnera pas pour "20pt" ou "20em". parseInt ("20pt") == 20! C'est peut-être tout ce dont l'affiche a besoin, mais j'aimerais pouvoir utiliser X ("20em") par exemple et récupérer la vraie largeur en pixels.
Lawrence I. Siden
2
@lsiden: ça marche. parseInt("20em", 10) === 20et parseInt("20pt", 10) === 20. N'hésitez pas à coller l'une ou l'autre des expressions dans la console de votre navigateur préféré ou consultez cet exemple très court . Quel que soit le problème que vous rencontrez se trouve ailleurs dans votre code.
Andy E
6
A noter, la parseIntfonction ignorera en fait les caractères non entiers ajoutés à la fin d'une chaîne de caractères entiers. parseInt('234sdfsdf') == 234
Chris W.18
3
@AndyE: Isiden disait que parseInt ne convertira pas les valeurs em (ou pt ou autres) en valeurs de pixels équivalentes, ce dont certaines personnes peuvent avoir besoin.
LeartS
30

Plus généralement, parseFloattraitera correctement les nombres à virgule flottante, alors parseIntqu'il perdra silencieusement des chiffres significatifs:

parseFloat('20.954544px')
> 20.954544
parseInt('20.954544px')
> 20
Roly
la source
5 
$.parseMethod = function (s)
{
    return Number(s.replace(/px$/, ''));
};

bien que cela soit lié à jQuery, je ne sais pas

juste quelqu'un
la source
0

Désolé pour le déterrement, mais:

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
la source
parseInt ('16px', 10); fonctionne pour moi dans la console de développement de Google Chrome
Thomas
-2 
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

En essayant d'identifier la variable x avec une valeur de pixel I en utilisant jquery, je mets le + = entre guillemets. Au lieu d'avoir width: '+ = x', ce qui ne fonctionne pas car il pense que x est une chaîne plutôt qu'un nombre. Espérons que cela aide.

Elliot Suls
la source