Bagaimana untuk melaksanakan fungsi hide and show elemen dalam css

Dalam pembangunan web, kita selalunya perlu menggunakan css untuk mengawal penyembunyian dan paparan elemen. Ini boleh membantu kami mengoptimumkan reka letak halaman, meningkatkan pengalaman pengguna dan mencapai kesan interaktif yang berbeza. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menyembunyikan dan menunjukkan elemen, serta beberapa senario aplikasi praktikal.

CSS mengawal paparan dan menyembunyikan elemen

Dalam CSS, terdapat beberapa sifat yang boleh membantu kami mengawal paparan dan penyembunyian elemen, termasuk display, visibility dan opacity.

atribut paparan

display atribut ialah kaedah yang paling biasa digunakan untuk mengawal penyembunyian dan paparan elemen. Atribut ini boleh menentukan sama ada elemen ditunjukkan atau disembunyikan pada halaman dan boleh mengawal reka letak elemen. Terdapat banyak nilai untuk atribut paparan Berikut ialah beberapa nilai yang biasa digunakan dan maknanya:

• none: Sembunyikan elemen sepenuhnya dan jangan menduduki ruang halaman
• block: Elemen dipaparkan dalam blok dan menempati keseluruhan lebar bekas induk, dengan setiap blok dibalut dengan elemen sebelum dan seterusnya
• inline: Elemen dipaparkan sebaris dan akan terjejas oleh elemen sebaris lain tetapi tidak akan dipecahkan Aliran teks
• inline-block: Elemen dipaparkan dalam blok sebaris, serupa dengan sebaris, tetapi anda boleh menentukan lebar, tinggi dan jidarnya sendiri

Selain nilai yang disenaraikan di atas, Atribut paparan juga boleh menerima nilai lain, termasuk flex, grid dan table, dsb., yang boleh mencapai reka letak yang lebih fleksibel.

atribut keterlihatan

visibility atribut digunakan untuk mengawal keterlihatan elemen, tetapi elemen itu masih akan menduduki ruang halaman selepas ia disembunyikan. Hanya terdapat dua nilai untuk atribut ini:

• visible: elemen kelihatan
• hidden: elemen tersembunyi tetapi masih menggunakan ruang halaman

Berbanding dengan atribut display, atribut visibility mempunyai kesan yang kurang dan biasanya digunakan untuk mencapai beberapa kesan animasi teks dan imej.

atribut kelegapan

opacity atribut digunakan untuk mengawal ketelusan elemen Nilainya ialah nombor antara 0 dan 1. 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. Dengan menukar ketelusan unsur, kita boleh mencapai beberapa kesan fade-in dan fade-out.

Cara menyembunyikan dan menunjukkan elemen dalam css

Selain sifat yang diperkenalkan di atas, kami juga boleh menyembunyikan dan menunjukkan elemen dengan menetapkan nama kelas. Khususnya, kita boleh menetapkan nama kelas untuk elemen, dan kemudian mengawal paparan dan menyembunyikan elemen dengan menambah atau mengalih keluar nama kelas ini.

Berikut ialah contoh untuk menunjukkan atau menyembunyikan elemen div dengan mengklik butang:

<button id="b">点击我</button>
<div id="hideDiv" class="hide">这是一个隐藏的div</div>

.hide {
  display: none;
}

var button = document.getElementById('b');
var hideDiv = document.getElementById('hideDiv');

button.onclick = function() {
  if (hideDiv.classList.contains('hide')) {
    hideDiv.classList.remove('hide');
  } else {
    hideDiv.classList.add('hide');
  }
}

Dalam kod di atas, kami akan menyembunyikan elemen div melalui css Atribut paparan ditetapkan kepada tiada, dan kemudian nama kelas ditambahkan padanya. Dalam kod javascript, kami mendengar peristiwa klik butang dan menentukan sama ada untuk mengalih keluar atau menambah nama kelas tersembunyinya dengan menilai nama kelas elemen div setiap kali ia diklik.

Senario aplikasi praktikal

Mengawal penyembunyian dan paparan elemen adalah sangat biasa dalam pembangunan web sebenar:

Menu navigasi

. Apabila Apabila pengguna mengklik pada menu navigasi atau menu lungsur, kami boleh mengembangkan dan mengecutkan menu dengan mengawal paparan dan menyembunyikan item menu.

Kotak modal

Kotak modal sering digunakan apabila pengguna berinteraksi dengan tapak web. Kita boleh mencipta elemen div kotak modal dan mengawal paparan serta menyembunyikan kotak modal dengan menambah dan mengalih keluar nama kelas.

Kad Tajuk

Kadangkala, kita perlu memaparkan beberapa kad kandungan pada halaman, setiap kad mempunyai tajuk dan kandungan. Jika kami memaparkan semua kad pada halaman, halaman itu akan menjadi sangat sesak. Oleh itu, kita boleh mencapai susun atur halaman yang ringkas dengan mengawal paparan dan penyembunyian elemen kad.

Secara amnya, mengawal penyembunyian dan paparan elemen adalah operasi yang sangat biasa dalam pembangunan web. Dengan menggunakan atribut CSS dan nama kelas, kami boleh melaksanakan fungsi ini dengan mudah dan memberikan pengguna pengalaman interaktif yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi hide and show elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!