web-dev-qa-db-fra.com

Obtenir la valeur maximale css en tant que nombre et non en tant que chaîne?

Dans jQuery, vous pouvez obtenir la position la plus élevée par rapport au parent sous forme de nombre, mais vous ne pouvez pas obtenir la valeur css top sous forme de nombre si elle était définie dans px.
Disons que j'ai les éléments suivants:

#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 arriverait-on?

javascriptjquerycss
114
Pim Jager

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

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

Mise à jour: (comme suggéré par Ben): Vous devriez aussi donner le radix:

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

Le force à être analysé comme un nombre décimal, sinon les chaînes commençant par "0" pourraient être analysées comme un nombre octal (pourrait dépendre du navigateur utilisé).

202
M4N

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;
};

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

$("#logo").cssNumber("top")
25
Ivan Castellanos

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

J'ai également fourni des variations de type float et int adaptées à l'utilisation envisagée:

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/

13
Gone Coding