Jak uzyskać tylko numeryczną część właściwości CSS za pomocą jQuery?

Muszę wykonać obliczenia numeryczne na podstawie właściwości CSS. Jednak kiedy używam tego, aby uzyskać informacje:

$(this).css('marginBottom')

zwraca wartość „10px”. Czy jest jakiś trik tylko coraz udział liczby wartości bez względu na to czy jest to pxlub %lub emlub cokolwiek?

Spowoduje to wyczyszczenie wszystkich znaków niebędących cyframi, kropkami i znakami nie-minus z ciągu:

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

ZAKTUALIZOWANO dla wartości ujemnych

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

parseInt automatycznie zignoruje jednostki.

Na przykład:

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

W przypadku metody replace Twoja wartość css jest łańcuchem, a nie liczbą.

Ta metoda jest bardziej przejrzysta, prosta i zwraca liczbę:

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

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

Nawet jeśli marginBottom zdefiniowano w em, wartość wewnątrz parseFloat powyżej będzie w px, ponieważ jest to obliczona właściwość CSS.

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

Używam prostej wtyczki jQuery, aby zwrócić wartość liczbową dowolnej pojedynczej właściwości CSS.

Dotyczy parseFloatwartości zwracanej przez domyślną cssmetodę jQuery .

Definicja wtyczki:

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

Stosowanie:

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

Załóżmy, że masz właściwość najniższego marginesu ustawioną na 20px / 20% / 20em. Aby uzyskać wartość jako liczbę, istnieją dwie opcje:

Opcja 1:

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

Funkcja parseInt () analizuje ciąg znaków i zwraca liczbę całkowitą. Nie zmieniaj liczby 10 znalezionej w powyższej funkcji (znanej jako „podstawa”), chyba że wiesz, co robisz.

Przykładowe dane wyjściowe wyniesie: 20 (jeśli dolny margines jest ustawiony w pikselach) dla% i em, wyświetli liczbę względną w oparciu o bieżący rozmiar elementu nadrzędnego / czcionki.

Opcja 2 (osobiście wolę tę opcję)

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

Przykładowe dane wyjściowe wyniesie: 20 (jeśli dolny margines jest ustawiony w pikselach) dla% i em, wyświetli liczbę względną w oparciu o bieżący rozmiar elementu nadrzędnego / czcionki.

Funkcja parseFloat () analizuje łańcuch i zwraca liczbę zmiennoprzecinkową.

Funkcja parseFloat () określa, czy pierwszy znak w określonym ciągu jest liczbą. Jeśli tak, analizuje ciąg, aż osiągnie koniec liczby i zwraca liczbę jako liczbę, a nie jako ciąg.

Zaletą Opcji 2 jest to, że jeśli zwrócone zostaną liczby dziesiętne (np. 20,32322px), otrzymasz liczbę zwróconą z wartościami po przecinku. Przydatne, jeśli potrzebujesz konkretnych liczb, na przykład jeśli dolny margines jest ustawiony w em lub %

parseintobetnie wszelkie wartości dziesiętne (np. 1.5emdaje 1).

Wypróbuj replacefunkcję z wyrażeniem regularnym, np

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

Idę na:

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

Najprostszym sposobem uzyskania szerokości elementu bez jednostek jest:

target.width()

Źródło: https://api.jquery.com/width/#width2

Możesz zaimplementować ten bardzo prosty jQuery wtyczkę :

Definicja wtyczki:

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

Jest odporny na NaNwartości, które mogą wystąpić w starej wersji IE ( 0zamiast tego zwróci )

Stosowanie:

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

Cieszyć się! :)

Aby poprawić zaakceptowaną odpowiedź, użyj tego:

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

Jeśli chodzi tylko o „px”, możesz też użyć:

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

Powinien usuwać jednostki, zachowując ułamki dziesiętne.

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

posługiwać się

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

które zwracają tablicę. pierwszy indeks zwraca wartość dolnej krawędzi marginesu (przykład 20 dla 20 pikseli), a drugi indeks zwraca jednostkę dołu marginesu (przykład px dla 20 pikseli)