jquery css alih keluar px

jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh memanipulasi dokumen HTML dan gaya CSS dengan mudah. Dengan menggunakan jQuery, anda boleh menambah, memadam, mengubah suai dan bertanya gaya CSS dengan mudah, menjadikan reka bentuk halaman web lebih fleksibel dan pelbagai.

Dalam pembangunan bahagian hadapan, manipulasi gaya CSS sering digunakan. Salah satu permintaan biasa ialah mengalih keluar unit "px" daripada gaya CSS. Banyak kali kita perlu menukar nilai gaya CSS kepada nombor tanpa unit, supaya kita boleh menggunakan nombor ini untuk pengiraan dan perbandingan.

Dalam jQuery, terdapat banyak cara untuk mencapai fungsi ini. Berikut adalah beberapa kaedah biasa.

1. Gunakan fungsi parseInt()

Fungsi parseInt() ialah fungsi terbina dalam JavaScript, digunakan untuk menghuraikan rentetan dan mengembalikan integer. Untuk nilai CSS dengan unit "px", anda boleh menggunakan fungsi parseInt() untuk mengalih keluar unit, menghasilkan nombor.

Sebagai contoh, terdapat elemen dengan lebar "100px", kita boleh menggunakan kod berikut untuk menukarnya kepada nombor tanpa unit:

var width = parseInt($("#element").css("width"));

Dalam contoh ini, kita mula-mula menggunakan jQuery Pemilih memilih elemen, dan kemudian menggunakan kaedah .css() untuk mendapatkan nilai gaya CSS elemen tersebut. Akhir sekali, gunakan fungsi parseInt() untuk menukar nilai kepada integer. Dengan cara ini anda boleh mendapatkan nilai lebar tanpa unit.

2. Gunakan fungsi parseFloat()

Selain fungsi parseInt(), terdapat satu lagi fungsi terbina dalam JavaScript biasa yang dipanggil parseFloat(). Apa yang dilakukannya ialah menghuraikan rentetan dan mengembalikan nombor titik terapung. Untuk nilai CSS dengan titik perpuluhan dan unit "px", anda boleh menggunakan fungsi parseFloat() untuk mengalih keluar unit, menghasilkan nombor.

Sebagai contoh, jika terdapat unsur dengan kelegapan "0.5", kita boleh menggunakan kod berikut untuk menukarnya kepada nombor tanpa unit:

var opacity = parseFloat($("#element").css("opacity"));

Dalam contoh ini, kita juga menggunakan jQuery Pemilih memilih elemen, dan kemudian menggunakan kaedah .css() untuk mendapatkan nilai gaya CSS elemen. Akhir sekali, gunakan fungsi parseFloat() untuk menukar nilai kepada nombor titik terapung. Dengan cara ini anda boleh mendapatkan nilai ketelusan tanpa unit.

3. Gunakan ungkapan biasa

Selain menggunakan fungsi terbina dalam JavaScript, anda juga boleh menggunakan ungkapan biasa untuk mengalih keluar unit dalam gaya CSS. Ungkapan biasa ialah alat padanan corak yang berkuasa yang boleh mengenal pasti corak tertentu dalam rentetan dengan mudah.

Sebagai contoh, untuk menukar "100px" kepada nombor tanpa unit, anda boleh menggunakan kod berikut:

var num = "100px".replace(/D+/g, '');

Dalam contoh ini, kami menggunakan kaedah .replace() untuk menggantikan rentetan Unit "px" dalam . Kaedah ini memerlukan dua parameter: apa yang perlu diganti dan apa yang perlu diganti. Dalam contoh ini, kami menggunakan ungkapan biasa /D+/g untuk memadankan semua aksara bukan angka dalam rentetan dan menggantikannya dengan rentetan kosong. Dengan cara ini anda boleh mendapatkan nombor tanpa unit.

4. Gunakan pemalam perpustakaan kelas

Jika anda tidak biasa dengan ungkapan biasa atau mahu cara yang lebih mudah untuk mengalih keluar unit dalam gaya CSS, anda boleh mempertimbangkan untuk menggunakan perpustakaan kelas pemalam. jQuery mempunyai banyak pemalam yang sangat baik, beberapa daripadanya direka khusus untuk mengendalikan gaya CSS.

Sebagai contoh, anda boleh menggunakan pemalam jquery-unitize untuk mengalih keluar unit daripada gaya CSS. Mula-mula anda boleh memperkenalkan pemalam ke dalam fail HTML anda, kemudian gunakan kod berikut untuk mengalih keluar unit "px" dalam "100px":

var num = $.unitize("100px");

Dalam contoh ini, kami mula-mula menggunakan $.unitize( ) berfungsi untuk mengalih keluar unit "px" dan menetapkan nilai yang dikembalikan kepada nombor pembolehubah. Dengan cara ini anda boleh mendapatkan nombor tanpa unit.

Ringkasan

Tidak kira kaedah yang anda gunakan, mengalih keluar unit "px" daripada gaya CSS adalah sangat mudah. JavaScript dan jQuery menyediakan banyak alatan dan fungsi yang mudah untuk menjadikan pembangunan bahagian hadapan lebih mudah. Dalam pembangunan sebenar, anda boleh memilih kaedah yang paling sesuai untuk anda melaksanakan fungsi mengikut keperluan anda.

Atas ialah kandungan terperinci jquery css alih keluar px. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!