Bagaimana untuk menunjukkan dan menyembunyikan elemen div menggunakan CSS

Dalam reka bentuk dan pembangunan web, mengawal paparan dan menyembunyikan elemen adalah tugas yang sangat penting. CSS menyediakan satu set sifat dan kaedah untuk melaksanakan fungsi ini, yang paling biasa digunakan ialah atribut paparan dan atribut keterlihatan. Artikel ini akan memperkenalkan cara menggunakan elemen div CSS untuk mencapai fungsi tunjukkan dan sembunyikan.

1. Atribut paparan

Atribut paparan digunakan untuk mengawal sama ada elemen dipaparkan. Atribut ini mempunyai berbilang nilai, yang paling biasa digunakan ialah blok, sebaris dan tiada. Fungsi mereka adalah seperti berikut:

1. blok: menjadikan elemen sebagai elemen peringkat blok, iaitu, dipaparkan pada barisnya sendiri. Secara lalai, elemen div ialah elemen peringkat blok.
2. sebaris: Menjadikan elemen sebagai elemen sebaris, iaitu, dipaparkan dalam baris yang sama, tetapi bukan pada barisnya sendiri. Sebagai contoh, elemen seperti a dan span ialah elemen sebaris secara lalai.
3. tiada: Menyembunyikan elemen tetapi tidak mengambil ruang. Pada masa ini, elemen tidak akan dipaparkan pada halaman dan tidak menjejaskan reka letak.

Untuk melaksanakan fungsi show and hide, kita boleh melakukannya dengan menukar nilai atribut paparan. Contohnya, untuk menyembunyikan elemen div, anda boleh menggunakan gaya CSS berikut:

.hidden {
    display: none;
}

Mula-mula tentukan div dalam halaman HTML:

<div id="myDiv">这是一段要隐藏的内容</div>

Kemudian tentukan show-hide dalam Gaya CSS:

.showDiv {
    display: block;
}

.hideDiv {
    display: none;
}

Gunakan kod berikut dalam JavaScript untuk menogol paparan dan menyembunyikan:

var myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('hideDiv');
myDiv.classList.toggle('showDiv');

Dalam kod di atas, gunakan kaedah togol untuk menetapkan atribut paparan bagi elemen div antara hideDiv dan showDiv Tukar antara dua gaya supaya anda boleh mencapai kesan show dan hide.

2. Atribut kebolehlihatan

Atribut keterlihatan digunakan untuk mengawal sama ada elemen boleh dilihat. Atribut ini juga mempunyai berbilang nilai, yang paling biasa digunakan adalah kelihatan dan tersembunyi. Fungsi mereka adalah seperti berikut:

1. kelihatan: Unsur boleh dilihat, nilai lalai.
2. tersembunyi: Elemen tidak kelihatan tetapi mengambil ruang.

Tidak seperti atribut paparan, atribut keterlihatan tidak mengubah reka letak dan kedudukan elemen. Jika anda hanya mahu elemen tidak kelihatan tetapi menggunakan ruang, anda boleh menggunakan atribut visibility:hidden.

Sebagai contoh, berikut ialah gaya yang ingin menyembunyikan elemen div:

.visibility-hidden {
    visibility: hidden;
}

Tentukan elemen div dalam HTML dan tetapkan ID untuknya:

<div id="myDiv">这是一段要隐藏的内容</div>

Gunakan kod berikut dalam JavaScript untuk menyembunyikan dan menunjukkan:

var myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('visibility-hidden');

Dalam kod di atas, gunakan kaedah togol untuk menukar atribut keterlihatan elemen div antara keterlihatan tersembunyi dan gaya tanpa kelas ini name. , supaya paparan dan kesan sembunyikan boleh dicapai.

3. Kesimpulan

Di atas ialah cara menggunakan CSS untuk mengawal paparan dan penyembunyian elemen div. Kedua-dua kaedah boleh mencapai kesan yang sama, tetapi dalam situasi sebenar adalah perlu untuk memilih kaedah yang sesuai mengikut senario aplikasi tertentu. Juga dikawal melalui JS, operasi yang lebih fleksibel dan tepat boleh dicapai.

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan dan menyembunyikan elemen div menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!