Bagaimana untuk menyembunyikan dan menunjukkan div dalam css

DIV Sembunyikan dan Tunjukkan CSS

DIV ialah elemen penting dalam teg HTML Ia boleh digunakan untuk memaparkan teks, gambar, video, dsb. Dalam reka bentuk web, kita sering menghadapi situasi di mana kita perlu menyembunyikan atau menunjukkan elemen tertentu, yang memerlukan penggunaan CSS untuk menetapkan DIV. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menyembunyikan dan menunjukkan DIV.

1. Sifat paparan CSS

Sifat paparan CSS boleh mengawal cara elemen dipaparkan pada halaman. paparan mempunyai berbilang nilai, yang berikut biasanya digunakan:

1. tiada: elemen tidak dipaparkan dan tidak menduduki ruang halaman
2. blok: elemen akan menjana tahap blok bekas , menduduki keseluruhan lebar, dan selalunya digunakan untuk memaparkan elemen peringkat blok seperti teks atau gambar
3. sebaris: Elemen tidak akan menduduki garis dengan sendirinya, tetapi hanya menduduki lebar dan ketinggiannya sendiri; dan sering digunakan untuk memaparkan elemen sebaris seperti pautan dan gambar; memperuntukkan ruang elemen secara fleksibel.
4. Kami boleh menyembunyikan dan memaparkan DIV dengan menetapkan sifat paparan CSS.
5. Berikut ialah contoh untuk menggambarkan:

Dalam fail HTML, kami mencipta elemen DIV:

Ini adalah untuk sembunyikan /Kandungan yang dipaparkan

Kemudian dalam fail CSS, tetapkan atribut paparan DIV:

#myDiv{

}

Apabila halaman dimuatkan, elemen DIV ini akan disembunyikan. Pada ketika ini, kita perlu menambah acara untuk mencapai kesan paparan apabila tetikus mengklik.

  display:none;   /* 默认隐藏 */

Dalam JavaScript, anda boleh menukar atribut paparan CSS dengan menetapkan atribut gaya elemen untuk menyembunyikan dan memaparkan elemen. Berikut ialah operasi khusus:

/

Dapatkan elemen

/

var myDiv = document.getElementById('myDiv');

/ Apabila klik tetikus , tunjukkan DIV
/

fungsi showDiv(){

}

/

   myDiv.style.display = 'block';

Apabila tetikus diklik, sembunyikan DIV

/

function hiddenDiv(){

}

Dengan cara ini, apabila tetikus diklik, DIV akan dipaparkan pada halaman sebagai elemen peringkat blok. Apabila diklik sekali lagi, ia akan disembunyikan semula.

   myDiv.style.display = 'none';

2. Atribut keterlihatan CSS

Atribut lain yang mengawal penyembunyian dan paparan elemen ialah keterlihatan. keterlihatan mempunyai dua nilai: kelihatan (kelihatan) dan tersembunyi (tersembunyi). Tidak seperti paparan, apabila keterlihatan ditetapkan kepada tersembunyi, elemen disembunyikan tetapi masih menempati ruang pada halaman.

Dalam fail HTML, kami juga mencipta elemen DIV:

Berikut ialah kandungan yang hendak disembunyikan/ditunjukkan

Kemudian dalam fail CSS, tetapkan atribut keterlihatan DIV:

#myDiv{

}

Apabila halaman dimuatkan, DIV ini elemen akan Disembunyikan. Pada masa ini, kita perlu menambah acara untuk mencapai kesan paparan apabila tetikus mengklik.

  visibility:hidden;   /* 默认隐藏 */

Dalam JavaScript, kita juga boleh menukar atribut keterlihatan elemen dengan menukar atribut gayanya. Berikut ialah kod khusus:

/

Dapatkan elemen

/

var myDiv = document.getElementById('myDiv');

/ Apabila klik tetikus , paparan DIV
/

fungsi showDiv(){

}

/

   myDiv.style.visibility = 'visible';

Apabila tetikus diklik, sembunyikan DIV

/

fungsi hiddenDiv(){

}

Dengan cara ini, DIV akan kelihatan apabila tetikus diklik. Apabila diklik sekali lagi, ia akan disembunyikan semula.

   myDiv.style.visibility = 'hidden';

3. Ringkasan

Dalam reka bentuk web, menunjukkan dan menyembunyikan elemen adalah keperluan yang sangat biasa. Terdapat dua cara utama untuk mengawal penyembunyian dan paparan elemen: satu ialah mengawalnya dengan mengubah suai atribut paparan elemen, dan satu lagi adalah mengawalnya dengan mengubah suai atribut keterlihatan elemen. Dengan menguasai kedua-dua kaedah ini, kami boleh mengawal paparan dan penyembunyian pelbagai elemen dengan lebih fleksibel, seterusnya mencapai kesan paparan halaman web yang lebih baik.

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