kelas jelas javascript

Javascript ialah bahasa skrip yang berkuasa yang boleh menjadikan halaman web lebih jelas dan kaya. Dalam reka bentuk web, kita sering perlu menambah atau memadam beberapa kelas untuk melaraskan gaya halaman web. Walau bagaimanapun, jika kelas tidak dikosongkan, gaya halaman web akan keliru dan pengalaman pengguna akan terjejas. Artikel ini akan memperkenalkan cara Javascript mengosongkan kelas untuk mengurus gaya halaman web dengan lebih baik.

Pertama sekali, kita perlu memahami prinsip kelas. Dalam HTML, kita boleh menentukan satu atau lebih nama kelas untuk elemen dengan menambahkan atribut kelas, contohnya:

<div class="box red"></div>

Dalam CSS, kita boleh menggunakan pemilih kelas untuk menetapkan gaya untuk elemen dengan nama kelas yang ditentukan, contohnya. :

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

Dengan cara ini, kita boleh menetapkan elemen dengan nama kelas yang ditentukan kepada kotak persegi dengan latar belakang merah. Tetapi bagaimana jika kita mahu mengalih keluar kelas ini?

Salah satu cara ialah menggunakan jQuery, contohnya:

$('.box').removeClass('red');

Ini boleh mengalih keluar kelas merah semua elemen yang kelasnya mengandungi nama merah, tetapi jQuery itu sendiri adalah perpustakaan yang lebih besar, dan pengenalan akan meningkatkan Masa memuatkan halaman web. Oleh itu, kami lebih suka menggunakan kaedah asli Javascript untuk melaksanakan fungsi mengosongkan kelas.

1. Gunakan kaedah element.classList.remove

Javascript menyediakan atribut classList untuk elemen, yang mengembalikan objek DOMTokenList yang mengandungi nama kelas semua atribut kelas.

Kami boleh menggunakan kaedah alih keluar yang disediakan oleh objek ini untuk memadam kelas yang ditentukan. Contohnya:

var box = document.getElementsByClassName('box')[0];
box.classList.remove('red');

Ini akan mengalih keluar kelas merah elemen kotak. Perlu diingat bahawa classList.remove hanya boleh memadamkan satu kelas, bukan berbilang.

Jika kita ingin menggunakan gelung untuk memadam kelas tertentu dalam kelompok, kita boleh menggunakan kaedah split untuk menukar objek classList menjadi tatasusunan, dan kemudian gunakan kaedah forEach untuk melintasi tatasusunan dan memadam kelas yang ditentukan . Contohnya:

var boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
  box.classList.remove('red');
});

Di sini kita menggunakan kaedah querySelectorAll untuk memilih semua elemen dengan kotak kelas, kemudian melintasi tatasusunan dan memadam semua kelas merah.

2. Gunakan atribut element.className

Selain menggunakan kaedah classList.remove, kami juga boleh mengubah suai atribut className elemen untuk mengalih keluar nama kelas yang akan dipadamkan daripada nilai atribut.

Contohnya:

var box = document.getElementsByClassName('box')[0];
box.className = box.className.replace('red', '');

Dalam contoh ini, kami menggunakan kaedah ganti untuk menggantikan kelas merah dalam nilai atribut dengan rentetan kosong untuk memadamkan kelas. Perlu diingatkan bahawa jika terdapat berbilang nama kelas yang sama dalam nilai atribut, kaedah ini hanya boleh memadamkan salah satu daripadanya.

Jika kami mahu memadamkan semua nama kelas merah, kami boleh menggunakan ungkapan biasa untuk memadankan dan memadamkannya. Contohnya:

var box = document.getElementsByClassName('box')[0];
box.className = box.className.replace(/red /g, '');

Di sini kami menggunakan bendera g untuk menunjukkan padanan global dan menambah ruang pada ungkapan biasa untuk mengelakkan pemadaman kelas lain yang mengandungi rentetan merah.

3. Gunakan kaedah getAttribute dan setAttribute

Selain mengubah suai atribut className secara langsung, kami juga boleh menggunakan kaedah getAttribute dan setAttribute untuk mendapatkan dan menetapkan nilai atribut kelas bagi elemen tersebut.

Contohnya:

var box = document.getElementsByClassName('box')[0];
var classes = box.getAttribute('class').split(' ');
classes.splice(classes.indexOf('red'), 1);
box.setAttribute('class', classes.join(' '));

Dalam contoh ini, kami menggunakan kaedah getAttribute untuk mendapatkan nilai atribut kelas bagi elemen dan menukarnya kepada tatasusunan. Kemudian, kami menggunakan kaedah splice untuk memadam kelas merah yang ditentukan, dan menggunakan kaedah gabungan untuk menukar tatasusunan kembali kepada rentetan, dan menggunakan kaedah setAttribute untuk menetapkannya sebagai nilai atribut kelas baharu.

Perlu diambil perhatian bahawa kaedah getAttribute dan setAttribute adalah lebih perlahan daripada atribut className. Oleh itu, kita perlu memilih kaedah yang paling sesuai mengikut situasi sebenar.

Kesimpulan

Mengosongkan kelas ialah bahagian penting dalam pengurusan gaya halaman web. Kita boleh menggunakan atribut jQuery, classList, className dan getAttribute dan setAttribute untuk mencapai fungsi mengosongkan kelas. Memilih kaedah yang paling sesuai mengikut situasi sebenar boleh mengurus gaya halaman web dengan berkesan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci kelas jelas javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!