jQuery / Javascript - Jak przekonwertować wartość piksela (20px) na wartość liczbową (20)

101

Wiem, że jQuery ma pomocniczą metodę przetwarzania ciągów jednostek na liczby. Jaka jest metoda jQuery, aby to zrobić?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;
John Himmelman
źródło
parseInt (a, 10); zwraca NaN, jeśli a jest ciągiem znaków
vanduc1102

Odpowiedzi:

185

Nie jest do tego wymagane jQuery, Plain Ol 'JS (tm) zrobi to,

parseInt(a, 10);
Andy E.
źródło
4
Każdego dnia coraz bardziej kocham cię javascript
James Westgate
1
To nie zadziała dla „20pt” lub „20em”. parseInt ("20pt") == 20! To może być wszystko, czego potrzebuje plakat, ale chciałbym móc na przykład użyć X („20em”) i odzyskać prawdziwą szerokość w pikselach.
Lawrence I. Siden
2
@lsiden: to działa. parseInt("20em", 10) === 20i parseInt("20pt", 10) === 20. Możesz wkleić dowolne wyrażenie do konsoli swojej ulubionej przeglądarki lub zobaczyć ten bardzo krótki przykład . Każdy problem, który masz, leży w innym miejscu twojego kodu.
Andy E
6
Na marginesie, parseIntfunkcja faktycznie zignoruje wszelkie znaki nie będące liczbami całkowitymi dołączane na końcu łańcucha znaków całkowitych. parseInt('234sdfsdf') == 234
Chris W.
3
@AndyE: Isiden mówił, że parseInt nie skonwertuje wartości em (lub pt lub innych) na równoważne wartości pikseli, czego niektórzy mogą potrzebować.
LeartS
30

Mówiąc bardziej ogólnie, parseFloatpoprawnie przetworzy liczby zmiennoprzecinkowe, podczas gdy parseIntmoże po cichu utracić znaczące cyfry:

parseFloat('20.954544px')
> 20.954544
parseInt('20.954544px')
> 20
Roly
źródło
5
$.parseMethod = function (s)
{
    return Number(s.replace(/px$/, ''));
};

chociaż jak to się ma do jQuery, nie wiem

po prostu ktoś
źródło
0

Przepraszamy za kopanie, ale:

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
źródło
parseInt ('16px', 10); pracuj dla mnie w konsoli programistów Google Chrome
Thomas
-2
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

Próbując zidentyfikować zmienną x wartością piksela I za pomocą jQuery, wstawiam + = w cudzysłów. Zamiast szerokości: „+ = x”, co nie działa, ponieważ uważa, że ​​x jest łańcuchem, a nie liczbą. Mam nadzieję, że to pomoże.

Elliot Suls
źródło