Bagaimana untuk Menggunakan getElementsByClassName dengan betul dan Tukar Gaya Elemen Berdasarkan Peristiwa?

Menukar Gaya Elemen Menggunakan getElementsByClassName

getElementsByClassName membolehkan anda memilih berbilang elemen dengan nama kelas yang sama. Dalam contoh yang diberikan, kod ini bertujuan untuk menukar warna latar belakang semua div dengan nama kelas tertentu apabila peristiwa berlaku di luar div tersebut.

Diagnosis Masalah

The Kod yang diberikan mempunyai beberapa isu:

1. Penggunaan getElementsByClassName yang salah: Sintaks getElementsByClassName() mengembalikan koleksi elemen padanan, bukan satu elemen DOM. Untuk menukar gaya setiap elemen, anda perlu mengulangi koleksi.
2. Sintaks HTML tidak sah: ID elemen tidak boleh mengandungi ruang, menjadikan ID colorwitcher A dan colorwitcher B anda tidak sah .

Penyelesaian

Untuk menyelesaikan isu ini, anda boleh menggunakan kod yang diperbetulkan berikut:

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

Dalam kod yang diperbetulkan ini:

1. Kami mengulangi koleksi yang dikembalikan oleh getElementsByClassName untuk menukar gaya semua elemen padanan.
2. Kami menggunakan ID yang betul tanpa ruang untuk mengenal pasti elemen pencetus.
3. Kami mentakrifkan fungsi changeColor untuk menggunakan perubahan warna yang diingini pada elemen.

Nota Tambahan

Untuk prestasi optimum, pertimbangkan untuk menyimpan cache koleksi elemen dan bukannya menyoalnya semula setiap kali. Selain itu, menggunakan kelas CSS dan pendengar acara untuk perubahan gaya adalah lebih cekap daripada atribut sebaris.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan getElementsByClassName dengan betul dan Tukar Gaya Elemen Berdasarkan Peristiwa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!