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

J'ai besoin de faire un calcul numérique basé sur les propriétés CSS. Cependant, lorsque j'utilise ceci pour obtenir des informations:

$(this).css('marginBottom')

il renvoie la valeur «10px». Y a-t-il une astuce pour obtenir simplement la partie numérique de la valeur, que ce pxsoit %ou emou quoi que ce soit?

Cela nettoiera tous les non-chiffres, non-points et non-signe-signe de la chaîne:

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

MISE À JOUR pour les valeurs négatives

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

parseInt ignorera automatiquement les unités.

Par exemple:

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

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'));

parseFloat($(this).css('marginBottom'))

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

$(this).css('marginBottom').replace('px','')

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

Il s'applique parseFloatà la valeur renvoyée par la cssméthode par défaut de jQuery .

Définition du plugin:

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

Usage:

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

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 les 10 trouvés dans la fonction ci-dessus (connue sous le nom de "radix") à moins que vous ne sachiez ce que vous faites.

L'exemple de sortie sera: 20 (si la marge inférieure est définie en px) pour% et em il affichera le nombre relatif basé sur la taille de l'élément parent / police actuelle.

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

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

L'exemple de sortie sera: 20 (si la marge inférieure est définie en px) pour% et em il affichera le nombre relatif basé sur la taille de l'élément parent / police actuelle.

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'à ce qu'elle atteigne la fin du nombre et renvoie le nombre sous forme de nombre et non sous forme de chaîne.

L'avantage de l'option 2 est que si vous obtenez des nombres décimaux retournés (par exemple 20,32322px), vous obtiendrez le nombre retourné avec les valeurs derrière la virgule décimale. Utile si vous avez besoin de renvoyer des nombres spécifiques, par exemple si votre marge inférieure est définie sur em ou %

parseinttronquera toutes les valeurs décimales (par exemple 1.5emdonne 1).

Essayez une replacefonction avec regex par exemple

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

Id aller pour:

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

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

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

Définition du plugin:

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

Il est résistant aux NaNvaleurs qui peuvent se produire dans l'ancienne version d'IE (retournera à la 0place)

Usage:

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

Prendre plaisir! :)

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

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

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

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

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

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

utilisation

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

qui renvoient un tableau. le premier index renvoie la valeur de la marge inférieure (exemple 20 pour 20px) et le second index renvoie l'unité de la marge inférieure (exemple px pour 20px)