Bagaimana untuk Menggayakan Berbilang Elemen Secara Dinamik dengan Kelas yang Sama dengan Berlegar Peristiwa dalam JavaScript?

Cara Menggayakan Berbilang Elemen dengan Kelas Yang Sama Menggunakan JavaScript

Apabila bekerja dengan HTML dan CSS, kadangkala anda perlu menukar penggayaan secara dinamik daripada berbilang elemen dengan kelas yang sama. Dalam kes ini, persoalannya ialah tentang menggunakan getElementsByClassName untuk menukar warna latar belakang semua elemen dengan kelas tertentu apabila menuding pada elemen halaman lain.

Masalah timbul kerana getElementsByClassName mengembalikan koleksi elemen, bukan satu elemen . Untuk menggayakan berbilang elemen, anda perlu mengulangi koleksi dan menggunakan perubahan gaya pada setiap elemen.

<code class="js">var elements = document.getElementsByClassName('classname');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red';
}

Isu lain ialah acara tuding tidak dilampirkan dengan betul pada elemen sasaran. Dalam kod asal, acara onmouseover dilampirkan pada elemen pencetus (yang dilegarkan di atas). Untuk menukar penggayaan elemen sasaran, acara harus dilampirkan pada elemen sasaran itu sendiri.

<code class="html"><th class="classname" onmouseover="changeColor(this)">Hover Here</th></code>

Akhir sekali, adalah penting untuk ambil perhatian bahawa pengendali acara sebaris seperti onmouseover tidak disyorkan. Sebaliknya, anda harus menggunakan pendengar acara untuk melampirkan pengendali acara pada elemen.

<code class="js">function changeColor(element) {
  element.style.backgroundColor = 'red';
}

document.querySelectorAll('.classname').forEach((element) => {
  element.addEventListener('mouseover', () => {
    changeColor(element);
  });
});</code>

Dengan menggunakan teknik ini, anda boleh menukar gaya berbilang elemen dengan kelas yang sama secara dinamik apabila menuding pada elemen halaman lain.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Berbilang Elemen Secara Dinamik dengan Kelas yang Sama dengan Berlegar Peristiwa dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!