html sembunyikan rancangan

HTML menyembunyikan dan menunjukkan

Dalam kod HTML, kadangkala anda perlu menyembunyikan dan menunjukkan elemen tertentu. Dalam artikel ini, kita akan membincangkan beberapa cara untuk menyembunyikan dan menunjukkan elemen dalam HTML.

1. Gunakan atribut paparan

Atribut paparan digunakan untuk menentukan mod paparan elemen Ia mempunyai nilai pilihan berikut:

• tiada : Elemen tidak dipaparkan dan tidak mengambil ruang.
• blok: Elemen dipaparkan pada tahap blok, dengan pemisah baris sebelum dan selepasnya.
• sebaris: Elemen dipaparkan sebaris, tanpa pemisah baris sebelum dan selepas.
• blok sebaris: Elemen dipaparkan pada tahap blok sebaris, tanpa pemisah baris sebelum dan selepas, tetapi atribut seperti lebar dan tinggi boleh ditetapkan.

Dengan menetapkan atribut paparan, elemen boleh disembunyikan dan dipaparkan:

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

Dalam kod di atas, kami mula-mula menetapkan atribut paparan elemen div kepada tiada melalui atribut gaya , iaitu menyembunyikan unsur. Kemudian operasi klik butang dilaksanakan melalui peristiwa onclick dua elemen butang dan JavaScript, dengan itu mengubah keadaan paparan elemen.

2. Gunakan atribut keterlihatan

Atribut keterlihatan digunakan untuk menentukan keterlihatan elemen Ia mempunyai nilai pilihan berikut:

• boleh dilihat: Unsur boleh dilihat.
• tersembunyi: Elemen tidak kelihatan, tetapi masih menggunakan ruang.

Dengan menetapkan atribut keterlihatan, elemen boleh disembunyikan dan dipaparkan:

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

Dalam kod di atas, kami mula-mula menetapkan atribut keterlihatan elemen div kepada tersembunyi melalui atribut gaya , iaitu menyembunyikan unsur. Kemudian operasi klik butang dilaksanakan melalui peristiwa onclick dua elemen butang dan JavaScript, dengan itu mengubah keadaan paparan elemen.

3. Gunakan atribut kelegapan

Atribut kelegapan digunakan untuk menentukan ketelusan elemen Julat nilai ialah 0~1, 0 bermaksud telus sepenuhnya, 1 bermakna legap. Dengan menetapkan atribut kelegapan, kesan fade-out dan fade-out elemen boleh dicapai:

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

Dalam kod di atas, kami menyedari kesan fade-out dan fade-out bagi elemen div dengan menetapkan atribut kelegapan dan atribut peralihan bagi elemen div . Apabila butang diklik, tetapkan atribut kelegapan elemen div kepada nilai yang sepadan (0 atau 1) melalui JavaScript, dan kemudian tetapkan atribut peralihan kepada masa yang sepadan untuk mencapai kesan fade-out dan fade-out.

Ringkasan

Tiga kaedah di atas semuanya boleh menyembunyikan dan memaparkan elemen HTML, tetapi dalam situasi yang berbeza, ia mungkin mempunyai kesan yang berbeza. Ia adalah perlu untuk memilih kaedah yang sesuai mengikut keperluan dan senario tertentu.

Atas ialah kandungan terperinci html sembunyikan rancangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!