Bagaimana cara mendapatkan bagian numerik dari properti CSS dengan jQuery?

Saya perlu melakukan perhitungan numerik berdasarkan properti CSS. Namun, ketika saya menggunakan ini untuk mendapatkan info:

$(this).css('marginBottom')

mengembalikan nilai '10px'. Apakah ada trik untuk hanya mendapatkan nomor bagian dari nilai tidak peduli apakah itu pxatau %atau ematau apa pun?

Ini akan membersihkan semua non-digit, non-titik, dan bukan-minus-tanda dari string:

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

DIPERBARUI untuk nilai negatif

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

parseInt akan secara otomatis mengabaikan unit.

Sebagai contoh:

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

Dengan metode ganti, nilai css Anda adalah string, dan bukan angka.

Metode ini lebih bersih, sederhana, dan mengembalikan angka:

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

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

Bahkan jika marginBottom didefinisikan dalam mereka, nilai di dalam parseFloat di atas akan berada di px, karena itu adalah properti CSS yang dihitung.

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

Saya menggunakan plugin jQuery sederhana untuk mengembalikan nilai numerik properti CSS tunggal.

Ini berlaku parseFloatuntuk nilai yang dikembalikan oleh cssmetode default jQuery .

Definisi Plugin:

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

Pemakaian:

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

Mari kita asumsikan Anda memiliki properti margin-bawah yang diatur ke 20px / 20% / 20em. Untuk mendapatkan nilai sebagai angka ada dua opsi:

Pilihan 1:

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

Fungsi parseInt () mem-parsing string dan mengembalikan integer. Jangan mengubah 10 yang ditemukan dalam fungsi di atas (dikenal sebagai "radix") kecuali Anda tahu apa yang Anda lakukan.

Contoh Output akan menjadi: 20 (jika margin-bottom diatur dalam px) untuk% dan em itu akan menampilkan angka relatif berdasarkan Elemen Induk / ukuran Font saat ini.

Opsi 2 (Saya pribadi lebih suka opsi ini)

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

Contoh Output akan menjadi: 20 (jika margin-bottom diatur dalam px) untuk% dan em itu akan menampilkan angka relatif berdasarkan Elemen Induk / ukuran Font saat ini.

Fungsi parseFloat () mem-parsing string dan mengembalikan angka floating point.

Fungsi parseFloat () menentukan apakah karakter pertama dalam string yang ditentukan adalah angka. Jika ya, ia mem-parsing string hingga mencapai akhir angka, dan mengembalikan angka sebagai angka, bukan sebagai string.

Keuntungan Opsi 2 adalah jika Anda mendapatkan angka desimal yang dikembalikan (mis. 20,32322px), Anda akan mendapatkan angka yang dikembalikan dengan nilai di belakang titik desimal. Berguna jika Anda membutuhkan nomor tertentu yang dikembalikan, misalnya jika margin-bottom Anda ditetapkan dalam em atau %

parseintakan memotong nilai desimal apa pun (misalnya 1.5emmemberi 1).

Coba replacefungsi dengan regex misalnya

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

Id go for:

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

Cara paling sederhana untuk mendapatkan lebar elemen tanpa unit adalah:

target.width()

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

Anda dapat menerapkan plugin jQuery yang sangat sederhana ini :

Definisi Plugin:

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

Ini tahan terhadap NaNnilai-nilai yang mungkin terjadi di versi IE lama (akan kembali 0sebagai gantinya)

Pemakaian:

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

Nikmati! :)

Untuk meningkatkan jawaban yang diterima, gunakan ini:

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

Jika hanya untuk "px", Anda juga dapat menggunakan:

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

Harus menghapus unit sambil mempertahankan desimal.

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

menggunakan

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

yang mengembalikan array. indeks pertama mengembalikan nilai margin bawah (contoh 20 untuk 20px) dan indeks kedua mengembalikan unit margin bawah (contoh px untuk 20px)