Petua Pantas: Tambahkan atau keluarkan kelas CSS dengan JavaScript vanila

Gunakan JavaScript untuk menambah dan memadam kelas CSS secara dinamik untuk memanipulasi elemen web dengan mudah! Artikel ini akan menerangkan cara menggunakan atribut JavaScript className dan classList untuk menguruskan kelas CSS dengan cekap, dan merealisasikan pengubahsuaian dinamik elemen laman web, seperti memaparkan/menyembunyikan menu, menonjolkan ralat bentuk atau animasi elemen.

mata teras:

JavaScript boleh digunakan untuk mengubahsuai elemen halaman secara dinamik berdasarkan interaksi pengguna (seperti menunjukkan/menyembunyikan menu, menonjolkan kesilapan bentuk, atau kesan animasi).
• dan className sifat adalah alat yang kuat untuk mengendalikan kelas CSS; classList className boleh membuat fungsi dan menambah atau memadam kelas ke elemen menggunakan atribut classList atau
. Fungsi ini boleh mengambil pemilih rentetan atau elemen itu sebagai parameter, gelung melalui elemen dan menambah atau memadam kelas yang ditentukan.
• Atribut className classList (disokong oleh penyemak imbas dalam IE10 dan ke atas) menyediakan satu siri kaedah untuk mengendalikan kelas, termasuk
,
• dan classList, memudahkan proses menambah atau memadam kelas. add remove toggle
skema keserasian: gunakan

sifat

Atribut className membolehkan akses ke atribut kelas elemen HTML. Melalui operasi rentetan, kami boleh menambah dan memadam kelas. Kami akan menggunakan kaedah

untuk memilih elemen HTML (serasi dengan pelayar IE8 dan ke atas).

className querySelectorAll() Tambah Kelas:

Padam kelas:

function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}

Penyelesaian Pemodenan: Gunakan

function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}

Properties

classList IE10 dan ke atas penyemak imbas menyokong atribut, memudahkan operasi kelas.

Tambah Kelas: classList

Padam kelas:

function addClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.add(myClass));
}

Ringkasan

function removeClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.remove(myClass));
}

Artikel ini memperkenalkan kaedah untuk menambah dan memadam kelas CSS menggunakan sifat dan . Dengan menguasai kemahiran ini, anda boleh dengan mudah mencapai kesan dinamik elemen web dan meningkatkan pengalaman pengguna.

className FAQs (FAQs) classList

Tujuan menambahkan atau mengeluarkan kelas CSS menggunakan vanila JS?

secara dinamik mengawal penampilan dan tingkah laku elemen HTML, seperti perubahan gaya sebagai tindak balas kepada operasi pengguna, menunjukkan/menyembunyikan unsur -unsur, mewujudkan kesan animasi, dll.

• Bagaimana untuk menambah pelbagai kelas menggunakan
?
• lulus nama kelas sebagai parameter bebas:

  classList.add() element.classList.add("class1", "class2", "class3");

  Bolehkah anda memadam kelas yang tidak wujud pada elemen?
Ya, tidak akan melaporkan ralat, tetapi tidak akan melakukan sebarang operasi.

• Bagaimana untuk memeriksa sama ada elemen mengandungi kelas tertentu? Gunakan kaedah classList.contains() untuk mengembalikan nilai boolean.

• Bagaimana untuk memanipulasi kelas dengan pelbagai elemen pada masa yang sama? Gunakan querySelectorAll() untuk memilih elemen, dan kemudian gelung dan memanipulasi kelas setiap elemen.

• Bagaimana untuk menukar kelas elemen? Gunakan classList.toggle() kaedah.

• Perbezaan antara

  className dan classList? className adalah atribut rentetan; classList DOMTokenList

• Adakah elemen SVG disokong? Sokongan. classList

  Bagaimanakah keserasian penyemak imbas

• ? Pelayar moden disokong secara meluas, dan IE9 dan ke bawah tidak disokong. classList

• Bolehkah kaedah

  dipanggil dalam rantai? Ya. classList

Saya harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Petua Pantas: Tambahkan atau keluarkan kelas CSS dengan JavaScript vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!