Obtenir la valeur supérieure du css comme un nombre et non comme une chaîne ?

Question

En jQuery, vous pouvez obtenir la position supérieure relative 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 en 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 ne veux pas que la propriété css top soit le nombre 10...
Comment y parvenir ?

Answer 1

Vous pouvez utiliser la fonction parseInt() pour convertir la chaîne de caractères en un nombre, par ex :

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

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

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

Force l'analyse comme un 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é).

Answer 2

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

Il suffit donc d'utiliser cette méthode pour obtenir des valeurs numériques.

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

Answer 3

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). Utilisation de || 0 convertira Nan en 0 sans l'étape de test.

J'ai également fourni des variantes float et int pour répondre à 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;
};

Utilisation :

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

Test de manipulation http://jsfiddle.net/TrueBlueAussie/E5LTu/

Answer 4

Cela ne fonctionne pas pour moi, j'ai également récupéré le Top en tant que chaîne et j'ai supprimé le Pixel.

let item = document.querySelector('.myclass');

let IngTop = parseInt(getComputedStyle(item).top.replace('px',''));

.myclass{
top : 150px
}

<div class='myclass'></div>