Obtenir la valeur supérieure du CSS sous forme de nombre et non de chaîne?

Dans jQuery, vous pouvez obtenir la position supérieure par rapport au parent sous forme de nombre, mais vous ne pouvez pas obtenir la valeur supérieure css sous forme de nombre si elle a été définie px.
Disons que j'ai ce qui suit:

#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'

Mais je veux avoir la propriété css top comme numéro 10.
Comment y parvenir?

Vous pouvez utiliser la fonction parseInt () pour convertir la chaîne en un nombre, par exemple:

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

Mise à jour: (comme suggéré par Ben): Vous devriez également donner la base:

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

Force son analyse en tant que nombre décimal, sinon les chaînes commençant par «0» peuvent être analysées comme un nombre octal (cela peut dépendre du navigateur utilisé).

Un plugin jQuery basé sur la réponse de M4N

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

Donc, vous utilisez simplement cette méthode pour obtenir des valeurs numériques

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

Un plugin légèrement plus pratique / efficace basé sur la réponse d'Ivan Castellanos (qui était basée sur la réponse de M4N). L'utilisation || 0convertira Nan en 0 sans l'étape de test.

J'ai également fourni des variations float et int pour convenir à l'utilisation prévue:

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

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

Usage:

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

Testez le violon sur http://jsfiddle.net/TrueBlueAussie/E5LTu/