Bagaimanakah Saya Boleh Menyembunyikan dan Menyahsembunyikan Elemen DIV Dengan Berkesan Menggunakan JavaScript?

Sembunyikan dan Nyahsembunyikan Elemen 'div' dengan JavaScript

Mari pertimbangkan senario di mana anda ingin menogol keterlihatan dua elemen 'div' pada halaman web. Anda mempunyai butang yang mencetuskan paparan dan menyembunyikan unsur. Walau bagaimanapun, anda menghadapi masalah di mana hanya fungsi pertama menyembunyikan 'div' sasarannya tetapi bukan yang kedua.

Kawalan Keterlihatan Elemen dalam JavaScript

Untuk menyembunyikan atau tunjukkan elemen dalam JavaScript, anda boleh memanipulasi sifat gaya mereka. Untuk kawalan paparan, terdapat dua pilihan:

• Paparan: Tetapkan keterlihatan elemen.

  • 'tiada': Sembunyikan elemen.
  • 'blok': Paparkan elemen sebagai kendiri blok.
  • 'sebaris': Paparkan elemen sejajar dengan teks sekeliling.
  • 'sebaris-blok': Sama seperti 'sebaris' tetapi membenarkan elemen mempunyai lebar dan tinggi.

• Keterlihatan: Mengawal keterlihatan elemen sambil mengekalkan ruangnya.

  • 'tersembunyi': Sembunyikan elemen tetapi kekalkan ruangnya.
  • 'kelihatan': Tunjukkan elemen.

Menyembunyikan Koleksi Elemen

Jika anda ingin menyembunyikan berbilang elemen sekali gus, anda boleh menggunakan fungsi untuk mengulanginya dan menetapkan sifat paparannya kepada 'tiada':

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

Contoh Penggunaan:

hide(document.querySelectorAll('.target')); // Hides all elements with the 'target' class.
hide(document.querySelector('.target')); // Hides the first element with the 'target' class.
hide(document.getElementById('target')); // Hides the element with the ID 'target'.

Oleh menggunakan teknik ini, anda boleh menunjukkan atau menyembunyikan elemen 'div' dan sebarang elemen HTML lain pada halaman web anda dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan dan Menyahsembunyikan Elemen DIV Dengan Berkesan Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!