css div tunjukkan hide div

DIV dalam CSS menunjukkan dan menyembunyikan DIV

DIV ialah salah satu elemen yang paling biasa digunakan dalam HTML Ia boleh digunakan untuk mencipta pelbagai reka letak dan bekas dalam halaman web. Dalam CSS, menggunakan DIV untuk menunjukkan atau menyembunyikan DIV lain juga merupakan teknik yang berkesan. Artikel ini akan memperkenalkan cara menggunakan CSS untuk memaparkan dan menyembunyikan DIV.

Paparkan elemen DIV

Untuk memaparkan elemen DIV, anda boleh menggunakan paparan atribut CSS untuk mengawal mod paparannya. Atribut paparan mempunyai empat jenis nilai yang biasa digunakan:

1. blok: memaparkan elemen sebagai elemen peringkat blok.
2. blok sebaris: Paparkan elemen sebagai elemen blok sebaris (serupa dengan elemen sebaris, tetapi dengan ciri elemen tahap blok).
3. sebaris: Paparkan elemen sebagai elemen sebaris (seperti teks).
4. tiada: Menyembunyikan elemen dan tidak menduduki sebarang ruang pada halaman.

Sebagai contoh, gaya CSS berikut memaparkan elemen DIV dengan ID "demo" sebagai elemen peringkat blok:

demo {

display: block;

}

Sudah tentu, anda juga boleh memaparkannya sebagai elemen blok sebaris atau elemen sebaris, cuma tukar jenis nilai atribut paparan kepada "blok sebaris" atau "sebaris".

Sembunyikan elemen DIV

Untuk menyembunyikan elemen DIV, kaedah yang paling biasa ialah menetapkan jenis nilai atribut paparan gaya kepada "tiada", seperti ditunjukkan di bawah:

demo {

display: none;

}

Kaedah ini boleh membuatkan elemen DIV sasaran hilang sepenuhnya Walaupun anda menggunakan JavaScript atau kaedah lain untuk mendapatkan nilainya, anda tidak akan mendapat sebarang kandungan . Jika anda menetapkan paparan elemen DOM kepada "tiada", ia tidak akan dipaparkan pada halaman - walaupun anda menetapkan ketinggian dan lebar, ia tidak akan dipaparkan.

Sudah tentu, anda juga boleh menggunakan kaedah lain untuk menyembunyikan elemen DIV, seperti menggunakan atribut keterlihatan. Jenis nilai atribut keterlihatan termasuk:

1. kelihatan: elemen boleh dilihat.
2. tersembunyi: Unsur tidak kelihatan, tetapi mengambil kedudukan pada halaman.
3. runtuh: digunakan untuk jadual, elemen akan diruntuhkan.

Sebagai contoh, gaya CSS berikut menetapkan elemen DIV dengan ID "demo" menjadi tidak kelihatan:

demo {

visibility: hidden;

}

Pada masa ini, elemen DIV tidak akan kelihatan, tetapi ia akan tetap menempati kedudukannya pada halaman Apabila anda mengakses sifatnya menggunakan JavaScript atau kaedah lain, ia akan tetap kelihatan.

Gunakan JavaScript untuk mengawal paparan dan penyembunyian elemen DIV

Dalam sesetengah kes, anda mungkin perlu menggunakan JavaScript untuk mengawal paparan dan penyembunyian elemen DIV. Pada masa ini, kita boleh menggunakan atribut gaya yang disediakan oleh API DOM untuk mengubah suai gaya CSS elemen. Sebagai contoh, kod JavaScript berikut memaparkan elemen DIV dengan ID "demo":

document.getElementById("demo").style.display = "block";

Sama , kami juga boleh menyembunyikannya:

document.getElementById("demo").style.display = "none";

Perlu diambil perhatian bahawa atribut gaya hanya boleh mengakses gaya sebaris , manakala luaran helaian gaya dan helaian gaya terbenam tidak boleh diakses. Jika anda menggunakan helaian gaya luaran untuk mengawal gaya elemen, maka anda perlu menggunakan kaedah lain untuk mengubah suai helaian gaya, seperti memanipulasi elemen pautan melalui API DOM.

Ringkasan

Menggunakan elemen DIV dalam CSS untuk menunjukkan atau menyembunyikan elemen lain ialah teknologi yang sangat praktikal Ia boleh digunakan untuk mencipta kesan halaman web dinamik, menyembunyikan iklan dan kandungan serta menggunakan JavaScript untuk elemen kawalan. Perlu diingatkan bahawa jenis nilai atribut paparan dan atribut keterlihatan adalah sangat berbeza, dan harus dipilih berdasarkan kesan pelaksanaan tertentu.

Apabila menggunakan JavaScript untuk mengawal gaya elemen, anda harus memberi perhatian kepada isu keserasian penyemak imbas untuk menyokong pelbagai platform dan peranti dengan lebih baik. Pada masa yang sama, adalah disyorkan untuk menggunakan CSS untuk mengawal gaya elemen apabila mungkin untuk meningkatkan kebolehselenggaraan dan prestasi kod.

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