jQuery / Javascript - Wie konvertiere ich einen Pixelwert (20px) in einen Zahlenwert (20)


101

Ich weiß, dass jQuery eine Hilfsmethode zum Parsen von Einheitenzeichenfolgen in Zahlen hat. Was ist die jQuery-Methode, um dies zu tun?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;

parseInt (a, 10);
— Gib

Antworten:


183

Dafür ist keine jQuery erforderlich, Plain Ol 'JS (tm) wird es tun,

parseInt(a, 10);

4
Jeden Tag in jeder Hinsicht Ich liebe dich immer mehr Javascript
— James Westgate

1
Dies funktioniert nicht für "20pt" oder "20em". parseInt ("20pt") == 20! Dies mag alles sein, was das Poster benötigt, aber ich möchte beispielsweise X ("20em") verwenden und die wahre Breite in Pixel zurückerhalten können.
— Lawrence I. Siden

2
@lsiden: es funktioniert. parseInt("20em", 10) === 20und parseInt("20pt", 10) === 20. Fügen Sie entweder einen Ausdruck in die Konsole Ihres bevorzugten Browsers ein oder sehen Sie sich dieses sehr kurze Beispiel an . Welches Problem Sie auch haben, es liegt an anderer Stelle in Ihrem Code.
— Andy E

6
Als Nebenbemerkung ignoriert die parseIntFunktion tatsächlich alle nicht ganzzahligen Zeichen, die an das Ende einer Zeichenfolge von ganzzahligen Zeichen angehängt werden. parseInt('234sdfsdf') == 234
— Chris W.

3
@AndyE: Isiden sagte, dass parseInt em-Werte (oder pt oder andere) nicht in die entsprechenden Pixelwerte konvertieren wird, was einige Leute möglicherweise benötigen.
— LeartS

30

Im Allgemeinen parseFloatwerden Gleitkommazahlen korrekt verarbeitet, während im parseIntStillen möglicherweise signifikante Ziffern verloren gehen:

parseFloat('20.954544px')
> 20.954544
parseInt('20.954544px')
> 20


5
$.parseMethod = function (s)
{
    return Number(s.replace(/px$/, ''));
};

Obwohl dies mit jQuery zusammenhängt, weiß ich nicht


0

Entschuldigung für das Ausgraben, aber:

var bar = "16px";

var foo = parseInt(bar, 10); // Doesn't work! Output is always 16px
// and
var foo = Number(s.replace(/px$/, '')); // No more!

parseInt ('16px', 10); arbeite für mich in der Google Chrome Dev Console
— Thomas

-2
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

Wenn ich versuche, die Variable x mit einem Pixelwert I mithilfe von jquery zu identifizieren, setze ich das + = in Anführungszeichen. Anstatt Breite zu haben: '+ = x', was nicht funktioniert, weil es denkt, dass x eher eine Zeichenfolge als eine Zahl ist. Hoffentlich hilft das.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.