Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menukar gaya kelas elemen dengan css

Bagaimana untuk menukar gaya kelas elemen dengan css

PHPz
Lepaskan: 2023-04-25 11:36:02
asal
1181 orang telah melayarinya

CSS (Cascading Style Sheets) ialah teknologi yang tidak dapat dielakkan dan penting dalam pembangunan web Ia membolehkan pembangun memisahkan gaya halaman web daripada struktur halaman, mencapai kod yang lebih jelas dan mudah diselenggara. Dalam CSS, kelas ialah pemilih penting yang membolehkan pembangun menetapkan atribut dan nilai tertentu kepada elemen untuk mencapai kesan gaya tersuai.

Kadangkala, kita perlu mengubah suai kelas elemen secara dinamik semasa operasi JavaScript Contohnya, apabila pengguna mengklik butang, halaman perlu menukar gaya berdasarkan input pengguna atau status sistem. Dalam CSS, menukar kelas elemen adalah sangat mudah, hanya gunakan antara muka element.classList.

Antara muka element.classList ialah API baharu dalam HTML5 Ia menyediakan kaedah mudah untuk mengendalikan kelas elemen, seperti add(), remove() dan toggle(), dsb., supaya pembangun boleh. Tambah, padam dan ubah suai gaya kepada elemen dengan mudah. Di bawah ini saya akan memperkenalkan beberapa kaedah antara muka classList yang biasa digunakan dan penggunaannya.

  1. add()

Kaedah add() boleh menambah kelas baharu pada classList elemen Jika kelas sudah wujud dalam elemen, kemudian tambah() The kaedah mengabaikan operasi ini. Berikut ialah sintaksnya:

element.classList.add(class1 [, class2 [, ... [, classN]]])
Salin selepas log masuk

Kod contoh:

const element = document.querySelector('#myDiv');
element.classList.add('myClass');
Salin selepas log masuk
  1. remove()

Kaedah remove() boleh mengalih keluar sedia ada Kelas dialih keluar daripada classList elemen Jika kelas tidak wujud untuk elemen, kaedah remove() akan mengabaikan operasi. Berikut ialah sintaksnya:

element.classList.remove(class1 [, class2 [, ... [, classN]]])
Salin selepas log masuk

Kod sampel:

const element = document.querySelector('#myDiv');
element.classList.remove('myClass');
Salin selepas log masuk
  1. toggle()

kaedah toggle() boleh didapati dalam classList elemen Tambah atau alih keluar kelas bergantung pada sama ada kelas itu sudah wujud pada elemen. Jika elemen tidak mempunyai kelas, kaedah toggle() menambahkannya pada classList jika elemen tersebut sudah mempunyai kelas, kaedah toggle() mengalihkannya daripada classList. Berikut ialah sintaksnya:

element.classList.toggle(class, true|false)
Salin selepas log masuk

Antaranya, apabila nilai parameter kedua adalah benar, ia bermakna menambah kelas secara paksa jika nilai itu palsu, ia bermakna mengalih keluar kelas secara paksa. Kod sampel:

const element = document.querySelector('#myDiv');
element.classList.toggle('myClass');
Salin selepas log masuk
  1. mengandungi()

mengandungi() kaedah boleh menyemak sama ada classList elemen mengandungi kelas yang ditentukan, maka Mengembalikan benar; jika ia tidak wujud, mengembalikan palsu. Berikut ialah sintaksnya:

element.classList.contains(class)
Salin selepas log masuk

Kod sampel:

const element = document.querySelector('#myDiv');
if (element.classList.contains('myClass')) {
  console.log('包含该class');
} else {
  console.log('不包含该class');
}
Salin selepas log masuk

Ringkasan:

Dalam proses pembangunan web, menukar kelas elemen secara dinamik adalah tugas yang sangat penting. Teknologi penting yang boleh menjadikan kesan interaktif halaman web lebih kaya dan lebih jelas. Antara muka element.classList menyediakan kaedah mudah untuk mengendalikan kelas elemen, membolehkan pembangun menambah, memadam, mengubah suai dan menyemak gaya dengan mudah. Artikel ini memperkenalkan empat kaedah antara muka classList yang biasa digunakan add(), remove(), toggle() dan contains() dan cara menggunakannya saya harap ia akan membantu semua orang.

Atas ialah kandungan terperinci Bagaimana untuk menukar gaya kelas elemen dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan