wake-up-neo.net

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 benutze, um Informationen zu erhalten:

$(this).css('marginBottom')

es gibt den Wert '10px' zurück. Gibt es einen Trick, um nur den Zahlenteil des Werts abzurufen, egal ob es sich um px oder % Oder em handelt oder was auch immer?

151
Tim Sheiner

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

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

AKTUALISIERT für negative Werte

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

parseInt ignoriert die Einheiten automatisch.

Beispielsweise:

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

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'));
115
maximelebreton
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.

13
Alex Pavlov
$(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

5
Arman Nisch

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

Ich würde gehen für:

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

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

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

target.width()

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

3
Paul Leclercq

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! :)

3
CodeGems

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

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

Verwenden Sie zur Verbesserung der akzeptierten Antwort Folgendes:

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

Sollte Einheiten unter Beibehaltung der Dezimalstellen entfernen.

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