CSS-Spitzenwert als Zahl erhalten, nicht als Zeichenfolge?

In jQuery können Sie die oberste Position relativ zum übergeordneten Element als Zahl abrufen, aber Sie können den obersten CSS-Wert nicht als Zahl abrufen, 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?

Mit der Funktion parseInt () können Sie die Zeichenfolge in eine Zahl konvertieren, z.

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

Update: (wie von Ben vorgeschlagen): Du solltest auch den Radix geben:

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

Erzwingt das Parsen als Dezimalzahl, andernfalls werden Zeichenfolgen, die mit '0' beginnen, möglicherweise als Oktalzahl analysiert (abhängig vom verwendeten Browser).

Ein jQuery-Plugin basierend auf der Antwort von M4N

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 (basierend auf der Antwort von M4N). Mit || 0wird Nan ohne Testschritt in 0 konvertiert.

Ich habe auch Float- und Int-Variationen bereitgestellt, um sie dem Verwendungszweck anzupassen:

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

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

Verwendung:

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

Testen Sie die Geige auf http://jsfiddle.net/TrueBlueAussie/E5LTu/