Bagaimana untuk menyembunyikan elemen dalam css3 (dua kaedah)

Teknologi tersembunyi CSS3 membolehkan anda mengawal reka letak halaman dan paparan kandungan dengan berkesan

Dalam penghasilan halaman web, CSS3 menyediakan banyak teknologi yang sangat baik, membolehkan pembangun mengawal reka letak dan paparan kandungan halaman web dengan lebih fleksibel. Antaranya, teknologi penyembunyian CSS3 adalah teknologi yang sangat penting yang membolehkan anda menyembunyikan beberapa kandungan yang tidak perlu dipaparkan pada halaman web, dengan itu menjadikan halaman lebih ringkas dan jelas, serta memberikan pengalaman pengguna yang lebih baik.

1. Gambaran Keseluruhan

Dalam halaman web, menyembunyikan elemen adalah operasi biasa, biasanya kerana halaman perlu memaparkan kandungan secara dinamik mengikut situasi yang berbeza atau perlu mencapai beberapa kesan gaya khas. Sudah tentu, jika anda ingin menyembunyikan elemen dalam halaman web, pendekatan tradisional adalah untuk menetapkan atribut paparannya kepada tiada. Walau bagaimanapun, walaupun kaedah ini boleh mencapai kesan menyembunyikan elemen, elemen tersembunyi akan dialih keluar sepenuhnya daripada halaman, dan ruang susun atur yang didudukinya juga akan hilang Jika ia perlu dipaparkan kemudian, reka letak perlu dibina semula. Menyebabkan masalah yang tidak perlu.

CSS3 menyediakan dua atribut, keterlihatan dan kelegapan, yang boleh menyembunyikan elemen tanpa mengalih keluarnya daripada halaman. Kedua-dua sifat mengawal ketelusan unsur, tetapi kesannya berbeza sedikit. Atribut keterlihatan boleh menyembunyikan elemen dan mengekalkan ruang reka letaknya manakala atribut kelegapan boleh mengawal ketelusan elemen, mengekalkan ruang reka letaknya walaupun ia tidak kelihatan.

2. Cara menggunakan

① Gunakan atribut keterlihatan untuk menyembunyikan

Anda boleh menetapkan atribut keterlihatan elemen kepada tersembunyi atau runtuh. Antaranya, tersembunyi bermaksud menyembunyikan elemen dan mengekalkan ruang reka letaknya pada halaman runtuh hanya terpakai kepada elemen jadual, menunjukkan menyembunyikan lajur atau baris dan menghapuskan ruang reka letaknya pada halaman.

Sebagai contoh, berikut ialah kod sampel yang menyembunyikan elemen dan kemudian memaparkannya:

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

Dalam kod sampel ini, mula-mula tetapkan atribut keterlihatan elemen sasaran kepada tersembunyi, Tetapi ruang susun aturnya kekal dalam halaman. Anda kemudian boleh memaparkan semula elemen pada halaman dengan menetapkan sifat keterlihatannya kepada kelihatan melalui JavaScript.

② Gunakan atribut kelegapan untuk menyembunyikan

Untuk menggunakan atribut kelegapan untuk menyembunyikan elemen, ketelusan elemen mesti ditetapkan kepada 0. Dengan cara ini, walaupun elemen tidak kelihatan, ruang susun aturnya dikekalkan pada halaman. Begitu juga, anda boleh menetapkan ketelusan elemen kepada 1 melalui JavaScript, memaparkannya semula pada halaman.

Sebagai contoh, berikut ialah kod sampel yang menyembunyikan elemen dan kemudian memaparkannya:

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

Dalam kod sampel ini, mula-mula tetapkan atribut kelegapan elemen sasaran kepada 0, Dengan cara ini ia disembunyikan dan mengekalkan ruang susun atur pada halaman. Anda kemudiannya boleh memaparkan elemen itu semula dengan menetapkan sifat kelegapannya kepada 1 melalui JavaScript.

3. Ringkasan

Dalam pengeluaran halaman web, menyembunyikan elemen adalah operasi yang sangat biasa. Kaedah tradisional menyembunyikan elemen biasanya membawa kepada susun atur, gaya dan masalah lain yang tidak perlu pada halaman. Teknologi penyembunyian CSS3 menyediakan dua atribut, keterlihatan dan kelegapan, yang boleh menyembunyikan elemen dan mengekalkan ruang susun aturnya, mencapai reka letak halaman yang lebih cekap dan mudah serta kesan paparan kandungan.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan elemen dalam css3 (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!