Bagaimana untuk Memeriksa dengan Amanah sama ada Elemen HTML Mengandungi Kelas Khusus dalam JavaScript?

Adakah Terdapat Kaedah untuk Semak sama ada Elemen HTML Mengandungi Kelas Khusus dalam JavaScript?

Masalah:

Pemula JavaScript sering bergantung pada perbandingan sifat className untuk menentukan sama ada elemen mengandungi kelas tertentu. Walau bagaimanapun, pendekatan ini gagal apabila elemen mempunyai berbilang kelas dan kelas yang dikehendaki bukan satu-satunya yang ada.

Penyelesaian:

Untuk menangani isu ini, JavaScript menyediakan harta classList dan kaedah mengandungi. Sifat classList mengembalikan senarai kelas yang digunakan pada elemen dan kaedah mengandungi menyemak sama ada kelas tertentu disertakan dalam senarai itu.

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

Pendekatan ini berfungsi dengan pasti tanpa mengira bilangan kelas yang terdapat pada elemen.

Pendekatan Alternatif:

Jika Senarai kelas tidak disokong dalam pelayar sasaran, kaedah alternatif yang menggunakan fungsi indexOf boleh digunakan:

function hasClass(element, className) {
  return (" " + element.className + " ").indexOf(" " + className + " ") > -1;
}

Pelaksanaan:

Untuk menggunakan pendekatan ini pada contoh yang disediakan dalam soalan, gantikan penyataan suis asal dengan kod berikut:

const element = document.getElementById("test");
const classes = ["class1", "class2", "class3", "class4"];

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

Kod ini berulang melalui kelas yang dijangkakan dan memaparkan yang pertama yang ada pada unsur.

Atas ialah kandungan terperinci Bagaimana untuk Memeriksa dengan Amanah sama ada Elemen HTML Mengandungi Kelas Khusus dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!