css hide show div

CSS Hide and Show DIV

Dalam pembangunan web, menyembunyikan dan menunjukkan elemen adalah tugas yang kerap digunakan, terutamanya apabila mencipta kesan dinamik. Menggunakan CSS boleh menyembunyikan dan menunjukkan elemen dengan mudah, dan ia juga boleh membuat tapak web dimuatkan dengan lebih pantas dan meningkatkan pengalaman pengguna.

1. atribut paparan

Atribut paparan boleh mengawal cara elemen dipaparkan. Ia mempunyai nilai berikut:

• tiada: bermakna elemen tidak dipaparkan dan mengambil 0 ruang.
• blok: Menunjukkan bahawa elemen akan dipaparkan sebagai elemen peringkat blok, menduduki satu baris.
• sebaris: Menunjukkan bahawa elemen akan dipaparkan sebagai elemen sebaris, tanpa pemisah baris dan disusun mengikut turutan.
• blok sebaris: Menunjukkan bahawa elemen akan dipaparkan sebagai elemen tahap blok sebaris tanpa pembalut baris, tetapi atribut seperti lebar, tinggi, pelapik, dsb. boleh ditetapkan.
• jadual: Menunjukkan bahawa elemen akan dipaparkan sebagai jadual.
• sel jadual: Menunjukkan bahawa elemen akan dipaparkan sebagai sel jadual.
• flex: Menunjukkan bahawa elemen menggunakan reka letak yang fleksibel.
• grid: Menunjukkan bahawa elemen menggunakan reka letak grid.

Sebagai contoh, kita boleh menggunakan display:none untuk menyembunyikan elemen:

<div style="display:none;">这是一个被隐藏的元素</div>

Gunakan display:block untuk memaparkan elemen sebagai elemen peringkat blok:

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. atribut keterlihatan

Atribut keterlihatan mengawal keterlihatan sesuatu elemen. Ia mempunyai nilai berikut:

• kelihatan: menunjukkan bahawa elemen itu boleh dilihat.
• tersembunyi: Menunjukkan bahawa elemen tidak kelihatan, tetapi ia masih akan mengambil ruang.

Sebagai contoh, kita boleh menggunakan visibility:hidden untuk menyembunyikan elemen:

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

Gunakan visibility:visible untuk memaparkan elemen.

3. atribut kelegapan

Atribut kelegapan boleh mengawal ketelusan sesuatu elemen. Julat nilainya ialah 0 hingga 1, 0 bermaksud telus sepenuhnya, 1 bermaksud legap.

Sebagai contoh, kita boleh menetapkan elemen menjadi separa telus:

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. Animasi CSS3

Selain daripada tiga kaedah di atas, kami juga boleh menggunakan animasi CSS3 untuk menyembunyikan dan menunjukkan elemen. Animasi CSS3 boleh menghasilkan kesan yang lebih kaya dan meningkatkan interaktiviti tapak web.

Sebagai contoh, kita boleh menggunakan @keyframes untuk mentakrifkan animasi tersembunyi untuk ditunjukkan:

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

Dalam kod di atas, kami mula-mula mentakrifkan peraturan @keyframes, yang mentakrifkan peralihan daripada ketelusan 0 hingga ketelusan 1 kesan animasi. Kemudian tetapkan class="show" dan ketelusan awal kepada 0 dalam elemen. Akhir sekali, atribut animasi ditambahkan pada kelas .show dalam helaian gaya, menyatakan nama, tempoh dan status helaian gaya selepas animasi tamat.

Dengan mengawal penambahan dan pengalihan keluar kelas ini, kita boleh menukar keadaan paparan elemen:

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

Ringkasan

Kandungan di atas memperkenalkan cara menyembunyikan dan menunjukkan elemen menggunakan Kaedah CSS, termasuk atribut paparan, atribut keterlihatan, atribut kelegapan dan animasi CSS3. Menguasai kaedah ini boleh membantu kami mencapai kesan halaman web yang lebih elegan dan canggih.

Atas ialah kandungan terperinci css hide show div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!