js keluarkan css

JavaScript ialah bahasa pengaturcaraan berkuasa yang digunakan untuk membangunkan aplikasi web interaktif. Dalam pembangunan web, ia digunakan secara meluas untuk membangunkan halaman dinamik dan skrip sebelah pelanggan. Ciri penting bahasa JavaScript ialah keupayaan untuk memanipulasi Model Objek Dokumen (DOM). Kami boleh menggunakan JavaScript untuk memanipulasi DOM, termasuk mencipta, mengubah suai dan memadamkan elemen. Artikel ini akan meneroka cara mengalih keluar CSS menggunakan JavaScript.

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan rupa dan gaya elemen halaman web. Fungsi utama CSS adalah untuk menjadikan reka bentuk laman web lebih bersatu dan profesional. Ia melakukan ini dengan menggunakan gaya pada elemen HTML. Kadangkala, kita perlu mengalih keluar atau menukar CSS semasa runtime untuk menyusun semula halaman atau menukar gaya elemen. Nasib baik, JavaScript menyediakan beberapa cara untuk menyelesaikan tugas ini.

1 Gunakan kaedah removeAttribute()

Kaedah removeAttribute() digunakan untuk mengalih keluar atribut yang ditentukan daripada elemen. Kaedah ini boleh digunakan untuk mengalih keluar atribut gaya, yang mengandungi peraturan CSS elemen. Untuk mengalih keluar gaya elemen, gunakan kod mudah ini:

document.getElementById('element-id').removeAttribute('style');

Dalam kod ini, kami menggunakan The kaedah getElementById() mendapatkan elemen dengan id yang ditentukan, dan kemudian menggunakan kaedah removeAttribute() untuk memadamkan atribut gayanya.

2. Gunakan atribut className

Atribut className mengandungi kelas CSS elemen, yang boleh digunakan untuk menukar gaya elemen secara dinamik. Untuk mengalih keluar kelas elemen, gunakan kod mudah ini:

document.getElementById('element-id').className = '';

Dalam kod ini, kami menggunakan getElementById( ) kaedah mendapat elemen dengan id yang ditentukan dan kemudian menetapkan nama kelasnya kepada rentetan kosong. Ini akan mengalih keluar semua nama kelas daripada elemen, termasuk gaya CSS.

3 Gunakan pengenalan dan pengalihan keluar CSS luaran

Selain mengalih keluar CSS daripada elemen, kami juga boleh menggunakan pengenalan dan pengalihan keluar fail CSS luaran untuk menukar gaya keseluruhan secara dinamik. laman web. Berikut ialah kod mudah untuk membawa masuk fail CSS luaran dalam JavaScript:

var link = document.createElement('link');
link.rel = 'stylesheet';
link .type = 'text/css';
link.href = 'style.css';
document.getElementsByTagName('head')[0].appendChild(link);

Kod ini , kami gunakan kaedah createElement() untuk mencipta elemen 2cdf5bf648cf2f33323966d7f58a7f3f Kami kemudian menetapkan atribut elemen ini, termasuk rel, jenis dan href, yang memberitahu penyemak imbas tempat untuk mencari fail CSS luaran dan cara menggunakannya. Akhir sekali, kami menggunakan kaedah getElementsByTagName() untuk mendapatkan elemen 93f0f5c25f18dab9d176bd4f6de5d30e dan menambahkan elemen 2cdf5bf648cf2f33323966d7f58a7f3f

Untuk mengalih keluar fail CSS luaran, gunakan kod mudah ini:

var links = document.getElementsByTagName('link');
for (var i = 0; i < links. panjang; i++) {
if (pautan[i].href.indexOf('style.css') != -1) {

links[i].parentNode.removeChild(links[i]);

}
}

In kod ini, kami menggunakan kaedah getElementsByTagName() untuk mendapatkan semua 2cdf5bf648cf2f33323966d7f58a7f3f dan menggunakan gelung untuk melintasinya. Jika atribut href bagi elemen 2cdf5bf648cf2f33323966d7f58a7f3f yang ditemui mengandungi nama fail CSS yang ditentukan (style.css dalam contoh ini), kami mengalih keluarnya daripada dokumen menggunakan kaedah parentNode.removeChild().

Ringkasan

Dalam artikel ini, kami melihat cara mengalih keluar dan menukar CSS menggunakan JavaScript. Kami menggunakan beberapa kaedah, termasuk kaedah removeAttribute(), pengenalan dan pengalihan keluar atribut className dan CSS luaran. Teknik ini boleh menukar CSS secara dinamik pada masa jalan, dengan itu menyusun semula halaman atau menukar gaya elemen. Menguasai teknik ini akan menjadikan anda lebih yakin dan berkesan dalam pembangunan web.

Atas ialah kandungan terperinci js keluarkan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!