web-dev-qa-db-fra.com

Comment obtenir juste une partie numérique de la propriété CSS avec jQuery?

Je dois faire un calcul numérique basé sur les propriétés CSS. Cependant, lorsque je l'utilise pour obtenir des informations:

$(this).css('marginBottom')

il retourne la valeur '10px'. Existe-t-il une astuce pour obtenir simplement la partie numérique de la valeur, que ce soit px ou % ou em ou autre chose?

javascriptjquerycssparsing
151
Tim Sheiner

Ceci nettoiera tous les non-chiffres, non-points et non-signes moins de la chaîne:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

UPDATED pour les valeurs négatives

157
zakovyrya
parseInt($(this).css('marginBottom'), 10);

parseInt ignorera automatiquement les unités.

Par exemple:

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10
274
Bob

Avec la méthode replace, votre valeur css est une chaîne et non un nombre.

Cette méthode est plus propre, simple et renvoie un nombre:

parseFloat($(this).css('marginBottom'));
115
maximelebreton
parseFloat($(this).css('marginBottom'))

Même si marginBottom est défini dans em, la valeur à l'intérieur de parseFloat ci-dessus sera dans px, car il s'agit d'une propriété CSS calculée.

13
Alex Pavlov
$(this).css('marginBottom').replace('px','')
9
Diodeus - James MacFarlane

Supposons que vous ayez une propriété margin-bottom définie sur 20px/20%/20em. Pour obtenir la valeur sous forme de nombre, il existe deux options:

Option 1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

La fonction parseInt () analyse une chaîne et renvoie un entier. Ne changez pas le 10 trouvé dans la fonction ci-dessus (appelée "radix") à moins que vous ne sachiez ce que vous faites.

Exemple La sortie sera: 20 (si margin-bottom défini dans px) pour% et em affichera le nombre relatif basé sur l'élément/la police parent en cours. Taille.

Option 2 (Je préfère personnellement cette option) 

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

Exemple La sortie sera: 20 (si margin-bottom défini dans px) pour% et em affichera le nombre relatif basé sur l'élément/la police parent en cours. Taille.

La fonction parseFloat () analyse une chaîne et renvoie un nombre à virgule flottante.

La fonction parseFloat () détermine si le premier caractère de la chaîne spécifiée est un nombre. Si tel est le cas, il analyse la chaîne jusqu'à la fin du nombre et renvoie le nombre sous forme de nombre et non de chaîne.

L’avantage de l’option 2 est que, si vous obtenez des nombres décimaux renvoyés (par exemple, 20.32322px), vous obtenez le nombre renvoyé avec les valeurs situées après le point décimal. Utile si vous avez besoin de renvoyer des nombres spécifiques, par exemple si votre marge inférieure est définie dans em ou %

5
Arman Nisch

J'utilise un simple plugin jQuery pour renvoyer la valeur numérique de toute propriété CSS unique.

Il applique parseFloat à la valeur renvoyée par la méthode par défaut css de jQuery.

Définition du plugin:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

tilisation:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);
5
Quickredfox

Id aller pour:

Math.abs(parseFloat($(this).css("property")));
4
mojo

parseint tronquera toutes les valeurs décimales (par exemple, 1.5em donne 1).

Essayez une fonction replace avec regex, par exemple.

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');
4
pelms

Le moyen le plus simple d’obtenir la largeur de l’élément sans unités est:

target.width()

Source: https://api.jquery.com/width/#width2

3
Paul Leclercq

Vous pouvez implémenter ce très simple jQuery plugin:

Définition du plugin:

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

Il résiste aux valeurs NaN qui peuvent apparaître dans les versions anciennes IE version (renverra 0 au lieu)

tilisation:

$(this).cssValue('marginBottom');

Prendre plaisir! :)

3
CodeGems

Si c'est juste pour "px", vous pouvez aussi utiliser:

$(this).css('marginBottom').slice(0, -2);
2
Carli Beeli

Pour améliorer la réponse acceptée, utilisez ceci:

Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));
2
ATR

Devrait supprimer les unités tout en préservant les décimales.

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));
0
Tyler