css menjadikan tersembunyi kelihatan

CSS ialah bahasa pembangunan bahagian hadapan yang biasa digunakan untuk mengawal gaya dan reka letak halaman web. Dalam pembangunan web, kadangkala anda perlu menyembunyikan elemen tertentu, tetapi kemudian perlu menunjukkannya dalam operasi seterusnya. Artikel ini akan memperkenalkan cara menggunakan CSS untuk memaparkan elemen tersembunyi.

1. Menyembunyikan elemen

Dalam CSS, jika anda ingin menyembunyikan elemen, anda boleh menggunakan atribut paparan. Atribut ini mempunyai berbilang nilai untuk dipilih, termasuk tiada, blok, sebaris, blok sebaris, jadual, dsb.

Apabila nilai paparan tiada, elemen akan disembunyikan sepenuhnya dan ruang yang didudukinya tidak akan dikekalkan;

Sebagai contoh, kita boleh menggunakan kod berikut untuk menyembunyikan elemen div:

div {
  display: none;
}

2 Tunjukkan elemen tersembunyi

Sekarang kita telah menyembunyikan elemen, Bagaimana untuk memaparkan dalam operasi seterusnya?

Anda boleh menggunakan nilai paparan yang lain - blok, sebaris, blok sebaris. Nilai ini boleh memaparkan elemen sebagai elemen peringkat blok, elemen sebaris atau elemen peringkat blok sebaris.

Sebagai contoh, jika anda ingin memaparkan elemen div tersembunyi, anda boleh menggunakan kod berikut:

div {
  display: block;
}

Selepas menetapkan nilai paparan untuk menyekat, elemen tersebut akan dipaparkan sebagai elemen tahap blok .

3. Gunakan JavaScript untuk memaparkan elemen

Selain menggunakan CSS untuk memaparkan elemen tersembunyi, kami juga boleh menggunakan JavaScript untuk mencapai ini.

Mula-mula, kita perlu mendapatkan objek DOM bagi elemen yang ingin kita paparkan, dan kemudian tetapkan atribut style.display elemen kepada nilai yang sepadan. Contohnya, jika elemen itu pada asalnya disembunyikan oleh display:none, kita boleh menetapkan sifat style.display untuk menyekat atau nilai lain untuk memaparkannya.

Berikut ialah kod contoh yang melaksanakan JavaScript untuk memaparkan elemen tersembunyi:

<script>
function showElement() {
  var element = document.getElementById("hidden-element");
  element.style.display = "block";
}
</script>

Dalam contoh ini, kami mentakrifkan fungsi yang dinamakan showElement() untuk memaparkan elemen pada halaman. Fungsi ini mula-mula mendapatkan elemen untuk dipaparkan melalui document.getElementById(), dan kemudian menetapkan sifat style.display elemen untuk disekat. Dengan cara ini, elemen akan dipaparkan.

4. Ringkasan

Dalam pembangunan web, menyembunyikan elemen ialah fungsi yang kerap digunakan. Elemen boleh disembunyikan dan ditunjukkan dengan mudah menggunakan sifat paparan dalam CSS. Selain itu, kami juga boleh menggunakan JavaScript untuk mengawal paparan dan penyembunyian elemen secara dinamik.

Di atas ialah perkara yang diperkenalkan oleh artikel ini, saya harap ia akan membantu semua orang untuk memahami dan menggunakan fungsi menyembunyikan dan menunjukkan dalam CSS.

Atas ialah kandungan terperinci css menjadikan tersembunyi kelihatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!