Cara JavaScript mengawal paparan dan penyembunyian elemen halaman

Dalam reka bentuk web moden, JavaScript ada di mana-mana dan fungsinya juga sangat berkuasa. Antaranya, mengawal paparan dan penyembunyian elemen halaman adalah fungsi yang sering perlu digunakan oleh banyak pembangun. Artikel ini akan memperkenalkan cara JavaScript mengawal paparan dan penyembunyian elemen halaman.

1. Paparkan dan sembunyikan dengan mengubah suai atribut paparan elemen

Cara paling asas untuk menyembunyikan dan memaparkan elemen halaman ialah dengan mengubah suai atribut paparan elemen. Atribut ini menentukan cara elemen dipaparkan pada halaman, seperti blok, sebaris atau tiada. Di sini kami mengambil butang untuk mengawal paparan dan menyembunyikan elemen div sebagai contoh Kodnya adalah seperti berikut:

<button onclick="toggleDiv()">点击切换</button>
<div id="myDiv">这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>

Dalam kod di atas, kami memanggil fungsi toggleDiv dalam acara onclick butang. . Fungsi ini menukar paparan dan menyembunyikan elemen dengan mendapatkan elemen myDiv dan mengubah suai atribut paparannya. Antaranya, penghakiman if digunakan untuk menilai status elemen semasa Jika tiada, ia ditetapkan untuk menyekat, jika tidak ia ditetapkan kepada tiada.

2. Paparkan dan sembunyikan dengan menambah dan mengalih keluar kelas CSS

Berdasarkan kaedah di atas, kami juga boleh memaparkan dan menyembunyikan dengan menambah atau mengalih keluar kelas unsur CSS. Faedah pendekatan ini ialah keupayaan untuk mengawal pelbagai elemen secara serentak. Sebagai contoh, kita boleh mentakrifkan kelas sorok dalam CSS:

.hide {
  display: none;
}

dan kemudian gunakan kelas ini dalam elemen halaman:

<button onclick="toggleElements()">点击切换</button>
<div id="myDiv" class="hide">这是一个 div 元素</div>
<p id="myPara" class="hide">这是一个段落元素</p>
<script>
function toggleElements() {
  var elements = document.querySelectorAll(".hide");
  elements.forEach(function(element) {
    if (element.classList.contains("hide")) {
      element.classList.remove("hide");
    } else {
      element.classList.add("hide");
    }
  });
}
</script>

Dalam kod di atas, kami memberikan elemen yang memerlukan to be hidden Menambah kelas hide, dan kemudian menggunakan fungsi querySelectorAll untuk mendapatkan semua elemen kelas dan gelung melaluinya. Dalam gelung, kami menentukan sama ada elemen mengandungi kelas hide, dan jika ya, alih keluar kelas hide, jika tidak tambahkan kelas hide. Dengan cara ini, anda boleh mengawal paparan dan menyembunyikan berbilang elemen.

3. Paparkan dan sembunyikan dengan mengubah suai atribut keterlihatan elemen

Kaedah lain yang biasa digunakan untuk mengawal paparan dan menyembunyikan elemen ialah dengan mengubah suai atribut keterlihatan elemen. Sama seperti atribut paparan, atribut keterlihatan menentukan sama ada elemen itu boleh dilihat pada halaman Nilai pilihan boleh dilihat atau tersembunyi. Berikut ialah contoh kod menggunakan kaedah ini:

<button onclick="toggleDiv()">点击切换</button>
<div id="myDiv">这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}
</script>

Dalam kod di atas, kami mencapai paparan dan penyembunyian dengan mendapatkan elemen myDiv dan mengubah suai atribut keterlihatannya. Berbeza daripada atribut paparan, atribut keterlihatan menyembunyikan elemen semasa masih menduduki ruang pada halaman, jadi jika anda perlu mengisi ruang, anda boleh menggunakan kaedah ini untuk mengawal paparan dan menyembunyikan elemen.

Kesimpulan

Melalui tiga kaedah di atas, kita boleh mengawal paparan dan penyembunyian elemen halaman dengan mudah. Pembangun boleh memilih kaedah kawalan yang sesuai dengan mereka berdasarkan keperluan sebenar untuk mencapai pengalaman pengguna dan kesan halaman yang terbaik.

Atas ialah kandungan terperinci Cara JavaScript mengawal paparan dan penyembunyian elemen halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!