Cara menggunakan JavaScript untuk menyembunyikan dan memaparkan div

Dalam pembangunan web, kami selalunya perlu melaksanakan fungsi menyembunyikan dan menunjukkan elemen melalui JavaScript untuk meningkatkan pengalaman interaksi pengguna. Salah satu senario klasik ialah mengklik butang untuk menyembunyikan atau menunjukkan elemen. Berikut akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi ini.

1. Struktur HTML

Pertama, kita perlu mencipta butang dan div untuk disembunyikan atau ditunjukkan dalam HTML:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div"></div>

gaya CSS

Kami boleh menambah gaya CSS pada butang dan div untuk menjadikannya lebih cantik dan mudah dikendalikan:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

3 Kod JavaScript

Seterusnya, kami perlu menggunakan kod JavaScript untuk Laksanakan fungsi menyembunyikan dan menunjukkan div. Kami boleh menggunakan pendengar acara untuk mendengar acara klik butang dan menggunakan gaya CSS untuk mengawal paparan dan penyembunyian div.

Pertama, kita perlu menentukan pembolehubah untuk mewakili keadaan div Keadaan awal dipaparkan, ditakrifkan sebagai benar:

let isShown = true;

Kemudian, kita boleh menggunakan kaedah querySelector untuk. dapatkan butang dan butang untuk disembunyikan Atau elemen DOM div yang dipaparkan:

const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');

Seterusnya, kita perlu mengikat acara klik, iaitu, apabila pengguna mengklik butang, lakukan operasi berikut:

toggleBtn.addEventListener('click', function() {
  if(isShown) {
    toggleDiv.style.display = 'none';
    isShown = false;
  } else {
    toggleDiv.style.display = 'block';
    isShown = true;
  }
});

Dalam perenggan ini Dalam kod, kami menentukan sama ada keadaan div dipaparkan Jika ya, tetapkannya kepada keadaan tersembunyi dan kemas kini pembolehubah keadaan pada masa yang sama, dan sebaliknya.

Kod lengkap:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    if(isShown) {
      toggleDiv.style.display = 'none';
      isShown = false;
    } else {
      toggleDiv.style.display = 'block';
      isShown = true;
    }
  });
</script>

4. Pengoptimuman

Kod di atas boleh menyembunyikan dan menunjukkan div, tetapi terdapat beberapa redundansi dalam kod yang boleh dioptimumkan.

Pertama, kita boleh menggunakan kaedah togol untuk menukar paparan dan keadaan tersembunyi div:

toggleBtn.addEventListener('click', function() {
  toggleDiv.style.display = isShown ? 'none' : 'block';
  isShown = !isShown;
});

Kedua, kita boleh mengalihkan definisi gaya ke dalam CSS untuk meningkatkan kebolehselenggaraan kod :

#toggle-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  padding: 5px 10px;
}

#toggle-div {
  background-color: #f5f5f5;
  padding: 10px;
}

Kod lengkap yang dioptimumkan akhir:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div">这是要隐藏或显示的div</div>

<style>
  #toggle-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    padding: 5px 10px;
  }

  #toggle-div {
    background-color: #f5f5f5;
    padding: 10px;
  }
</style>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    toggleDiv.style.display = isShown ? 'none' : 'block';
    isShown = !isShown;
  });
</script>

5 Ringkasan

Menggunakan JavaScript untuk menyembunyikan dan menunjukkan elemen adalah perkara biasa dalam pembangunan web. Fungsi ini boleh dilaksanakan dengan baik melalui pendengar acara, mengendalikan gaya CSS dan mengawal status elemen untuk meningkatkan pengalaman interaksi pengguna. Mengoptimumkan kod boleh meningkatkan lagi kebolehbacaan dan kebolehselenggaraan kod dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk menyembunyikan dan memaparkan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!