CSS-Top-Wert als Zahl abrufen, nicht als Zeichenfolge?

Lesezeit: 2 Minuten

Benutzer-Avatar
Pim Jäger

In jQuery können Sie die obere Position relativ zum übergeordneten Element als Zahl erhalten, aber Sie können den CSS-oberen Wert nicht als Zahl erhalten, wenn er festgelegt wurde px.
Angenommen ich habe folgendes:

#elem{
  position:relative;
  top:10px;
 }
<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>
$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'

Aber ich möchte die CSS-Top-Eigenschaft als Nummer haben 10.
Wie würde man das erreichen?

Benutzer-Avatar
M4N

Sie können die Funktion parseInt() verwenden, um den String in eine Zahl umzuwandeln, z. B.:

parseInt($('#elem').css('top'));

Aktualisieren: (wie von Ben vorgeschlagen): Sie sollten auch die Basis angeben:

parseInt($('#elem').css('top'), 10);

Erzwingt die Analyse als Dezimalzahl, andernfalls könnten Zeichenfolgen, die mit ‘0’ beginnen, als Oktalzahl analysiert werden (kann vom verwendeten Browser abhängen).

  • Sie sollten auch die Basis angeben: parseInt($(‘#elem’).css(‘top’), 10); Erzwingt, dass es als Basis 10 geparst wird, andernfalls werden Zeichenfolgen, die mit ‘0’ beginnen, in Basis 8 geparst.

    – Ben

    27. Dezember 2008 um 17:39 Uhr

  • Es könnte jedoch ein Float sein, daher ist es besser, parseFloat zu verwenden.

    – Vsevolod Golovanov

    7. Juni 2013 um 8:04 Uhr

Ein jQuery-Plugin, das auf der Antwort von M4N basiert

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop),10);
    return isNaN(v) ? 0 : v;
};

Dann verwenden Sie einfach diese Methode, um Zahlenwerte zu erhalten

$("#logo").cssNumber("top")

Ein etwas praktischeres/effizienteres Plugin basierend auf der Antwort von Ivan Castellanos (die auf der Antwort von M4N basierte). Verwenden || 0 wandelt Nan ohne den Testschritt in 0 um.

Ich habe auch Float- und Int-Variationen bereitgestellt, um der beabsichtigten Verwendung zu entsprechen:

jQuery.fn.cssInt = function (prop) {
    return parseInt(this.css(prop), 10) || 0;
};

jQuery.fn.cssFloat = function (prop) {
    return parseFloat(this.css(prop)) || 0;
};

Verwendungszweck:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

Testgeige an http://jsfiddle.net/TrueBlueAussie/E5LTu/

  • Es scheint, dass man entweder immer cssFloat verwenden oder bedenken sollte, dass cssInt einen Wert wie 25.9999999px auf 25 reduziert.

    – justingordon

    29. Dezember 2013 um 20:38 Uhr

  • @justingordon: Das ist das korrekte Integer-Truncation-Verhalten für ein int, also kommt es wirklich auf die erforderliche Verwendung des Werts an.

    – Weg Codierung

    29. Dezember 2013 um 22:05 Uhr

1246870cookie-checkCSS-Top-Wert als Zahl abrufen, nicht als Zeichenfolge?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy