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

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

parseInt ignoriert die Einheiten automatisch.

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 übersichtlicher, 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','')

Angenommen, 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.

Beispielausgabe ist: 20 (wenn der Rand unten in px festgelegt ist) für% und em gibt die relative Zahl basierend auf dem aktuellen übergeordneten Element/der aktuellen Schriftart aus Größe.

Option 2 (Ich persönlich bevorzuge diese Option)

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

Beispielausgabe ist: 20 (wenn der Rand unten in px festgelegt ist) für% und em gibt die relative Zahl basierend auf dem aktuellen übergeordneten Element/der aktuellen Schriftart aus Größe.

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öchten, zum Beispiel, wenn der untere Rand in em oder % festgelegt ist

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

Es wendet parseFloat auf den Wert an, der von der Standardmethode css von jQuery zurückgegeben wird.

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

Ich würde gehen für:

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

parseint schneidet alle Dezimalwerte ab (z. B. 1.5em gibt 1).

Versuchen Sie eine replace -Funktion mit Regex, z.

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

Der einfachste Weg, 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 NaN Werte, die in der alten IE Version auftreten können (wird stattdessen 0 Zurückgeben)

Verwendung:

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

Genießen! :)

Wenn es sich nur um "px" handelt, können Sie auch Folgendes verwenden:

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

Verwenden Sie zur Verbesserung der akzeptierten Antwort Folgendes:

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

Sollte Einheiten unter Beibehaltung der Dezimalstellen entfernen.

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