JQuery ile CSS özelliğinin sadece sayısal bir parçası almak nasıl?

CSS özelliklerine dayalı sayısal bir hesaplama yapmak gerekiyor. Ancak, bilgi almak için bunu kullandığımda:

$(this).css('marginBottom')

'10px' değerini döndürür. Sadece değerin sayı kısmını almak için bir hile olduğunu fark etmeksizin var mı pxyoksa %ya emya da her neyse?

Bu, dizeden tüm basamak olmayan, nokta olmayan ve eksi olmayan işaretleri temizler:

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

Negatif değerler için GÜNCELLENDİ

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

parseInt birimleri otomatik olarak yok sayar.

Örneğin:

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

Replace yöntemiyle, css değeriniz bir sayı değil, bir dizedir.

Bu yöntem daha temiz, basit ve bir sayı döndürüyor:

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

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

Em'de marginBottom tanımlanmış olsa bile, yukarıdaki parseFloat içindeki değer hesaplanan bir CSS özelliği olduğundan px cinsinden olacaktır.

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

Herhangi bir tek CSS özelliğinin sayısal değerini döndürmek için basit bir jQuery eklentisi kullanın.

parseFloatJQuery'nin varsayılan cssyöntemiyle döndürülen değer için geçerlidir .

Eklenti Tanımı:

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

Kullanımı:

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

Diyelim ki kenar boşluğu alt özelliği 20 piksel /% 20 / 20em olarak ayarlanmış. Değeri sayı olarak almak için iki seçenek vardır:

Seçenek 1:

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

ParseInt () işlevi bir dizeyi ayrıştırır ve bir tam sayı döndürür. Ne yaptığınızı bilmiyorsanız, yukarıdaki işlevde bulunan 10 değerini ("sayı tabanı" olarak bilinir) değiştirmeyin.

Örnek Çıktı% olarak: 20 (kenar boşluğu piksel olarak ayarlanırsa) ve geçerli Üst Öğe / Yazı Tipi boyutuna bağlı olarak göreli sayı verir.

Seçenek 2 (Şahsen bu seçeneği tercih ediyorum)

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

Örnek Çıktı% olarak: 20 (kenar boşluğu piksel olarak ayarlanırsa) ve geçerli Üst Öğe / Yazı Tipi boyutuna bağlı olarak göreli sayı verir.

ParseFloat () işlevi bir dizeyi ayrıştırır ve bir kayan nokta sayısı döndürür.

ParseFloat () işlevi, belirtilen dizedeki ilk karakterin bir sayı olup olmadığını belirler. Öyleyse, dizeyi sayının sonuna ulaşıncaya kadar ayrıştırır ve sayıyı dize olarak değil sayı olarak döndürür.

Seçenek 2'nin avantajı, ondalık sayıları döndürürseniz (örn. 20.32322px), ondalık noktanın arkasındaki değerlerle döndürülen sayıyı elde etmenizdir. Döndürülen belirli sayılara ihtiyacınız varsa yararlıdır, örneğin kenar boşluğunuz em veya % olarak ayarlanmışsa

parseintondalık değerleri keser (örn. 1.5emverir 1).

Normal ifade ile bir replaceişlevi deneyin, ör.

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

Şunun için gidiyorum:

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

Birim genişliğini birimsiz almanın en basit yolu:

target.width()

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

Bu çok basit jQuery eklentisini uygulayabilirsiniz :

Eklenti Tanımı:

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

NaNEski IE sürümünde oluşabilecek değerlere dayanıklıdır ( 0bunun yerine geri döner )

Kullanımı:

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

Zevk almak! :)

Kabul edilen cevabı geliştirmek için şunu kullanın:

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

Yalnızca "px" içinse şunları da kullanabilirsiniz:

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

Ondalık sayıları korurken birimleri kaldırmalıdır.

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

kullanım

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

bir dizi döndürür. ilk dizin kenar boşluğu altının değerini döndürür ( 20 piksel için örnek 20 ) ve ikinci dizin kenar boşluğu altının birimini döndürür ( 20 piksel için örnek piksel)