Wie bekomme ich mit jQuery nur einen numerischen Teil der CSS-Eigenschaft?

Ich muss eine numerische Berechnung basierend auf CSS-Eigenschaften durchführen. Wenn ich dies jedoch verwende, um Informationen zu erhalten:

$(this).css('marginBottom')

es gibt den Wert '10px' zurück. Gibt es einen Trick, um nur den Zahlenteil des Wertes zu erhalten, egal ob es ist pxoder %oder emoder was auch immer?

Dadurch werden alle Nicht-Ziffern, Nicht-Punkte und Nicht-Minus-Zeichen aus der Zeichenfolge entfernt:

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

AKTUALISIERT für negative Werte

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

parseInt ignoriert automatisch die Einheiten.

Beispielsweise:

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

Bei der Ersetzungsmethode ist Ihr CSS-Wert eine Zeichenfolge und keine Zahl.

Diese Methode ist sauberer, einfacher und gibt eine Zahl zurück:

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

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

Selbst wenn marginBottom in em definiert ist, wird der Wert in parseFloat oben in px angegeben, da es sich um eine berechnete CSS-Eigenschaft handelt.

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

Ich verwende ein einfaches jQuery-Plugin, um den numerischen Wert einer einzelnen CSS-Eigenschaft zurückzugeben.

Dies gilt parseFloatfür den Wert, der von der Standardmethode von jQuery zurückgegeben csswird.

Plugin Definition:

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

Verwendung:

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

Nehmen wir an, Sie haben eine Margin-Bottom-Eigenschaft, die auf 20px / 20% / 20em festgelegt ist. Um den Wert als Zahl zu erhalten, gibt es zwei Möglichkeiten:

Option 1:

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

Die Funktion parseInt () analysiert eine Zeichenfolge und gibt eine Ganzzahl zurück. Ändern Sie die 10 in der obigen Funktion (als "Radix" bezeichnet) nur, wenn Sie wissen, was Sie tun.

Beispiel Die Ausgabe lautet: 20 (wenn der untere Rand in px festgelegt ist) für% und em gibt die relative Anzahl basierend auf der aktuellen Größe des übergeordneten Elements / der übergeordneten Schriftart aus.

Option 2 (Ich persönlich bevorzuge diese Option)

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

Beispiel Die Ausgabe lautet: 20 (wenn der untere Rand in px festgelegt ist) für% und em gibt die relative Anzahl basierend auf der aktuellen Größe des übergeordneten Elements / der übergeordneten Schriftart aus.

Die Funktion parseFloat () analysiert eine Zeichenfolge und gibt eine Gleitkommazahl zurück.

Die Funktion parseFloat () bestimmt, ob das erste Zeichen in der angegebenen Zeichenfolge eine Zahl ist. Wenn dies der Fall ist, wird die Zeichenfolge analysiert, bis das Ende der Zahl erreicht ist, und die Zahl wird als Zahl und nicht als Zeichenfolge zurückgegeben.

Der Vorteil von Option 2 besteht darin, dass bei Rückgabe von Dezimalzahlen (z. B. 20.32322px) die Zahl mit den Werten hinter dem Dezimalpunkt zurückgegeben wird. Nützlich, wenn Sie bestimmte Zahlen zurückgeben müssen, z. B. wenn Ihr Rand unten in em oder % festgelegt ist

parseintschneidet alle Dezimalwerte ab (zB 1.5emgibt 1).

Versuchen Sie eine replaceFunktion mit Regex, z

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

Ich würde gehen für:

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

Der einfachste Weg, um die Elementbreite ohne Einheiten zu erhalten, ist:

target.width()

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

Sie können dieses sehr einfache jQuery- Plugin implementieren :

Plugin Definition:

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

Es ist resistent gegen NaNWerte, die in der alten IE-Version auftreten können (wird 0stattdessen zurückgegeben)

Verwendung:

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

Genießen! :) :)

Verwenden Sie Folgendes, um die akzeptierte Antwort zu verbessern:

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

Wenn es nur für "px" ist, können Sie auch verwenden:

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

Sollte Einheiten unter Beibehaltung der Dezimalstellen entfernen.

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

verwenden

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

die ein Array zurückgeben. Der erste Index gibt den Wert des unteren Randes zurück (Beispiel 20 für 20 Pixel) und der zweite Index gibt die Einheit des unteren Randes zurück (Beispiel px für 20 Pixel).