Bagaimana untuk menunjukkan dan menyembunyikan div css

CSS ialah bahasa yang digunakan untuk penggayaan halaman web Ia boleh digunakan untuk menukar rupa dan reka letak halaman. Dalam CSS, elemen div boleh digunakan untuk mengumpulkan kandungan web dan menggunakan gaya yang berbeza pada komponen ini. Antaranya, paparan dan penyembunyian elemen div sangat berguna dalam reka bentuk halaman.

Dalam artikel ini, kita akan membincangkan cara menggunakan elemen div CSS untuk menunjukkan dan menyembunyikan elemen halaman. Artikel ini akan merangkumi kandungan berikut:

1. Apakah elemen div CSS
2. Sifat paparan CSS
3. Sifat keterlihatan CSS
4. Cara menggunakan Elemen div CSS untuk menunjukkan dan menyembunyikan elemen halaman

1. Apakah elemen div CSS

Dalam HTML, elemen div ialah elemen peringkat blok tanpa semantik. Ia boleh digunakan untuk mengumpulkan kandungan web, dan rupa serta reka letak komponen ini boleh diubah suai melalui gaya CSS.

Sebagai contoh, katakan kita mempunyai tiga elemen kandungan yang berbeza pada halaman web Kod HTML untuk elemen ini adalah seperti berikut:

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

Dalam kod di atas, kami telah menggunakan tiga. divs Elemen kepada kandungan pengepala, badan dan pengaki kumpulan. Seterusnya, kita boleh mengubah suai gaya setiap elemen div melalui gaya CSS, seperti menetapkan warna latar belakang, fon teks, sempadan, dll.

2. Atribut paparan CSS

Dalam CSS, atribut paparan boleh digunakan untuk mengawal mod paparan sesuatu elemen. Nilainya termasuk yang berikut:

• tiada: Elemen tidak akan dipaparkan dan tidak akan menduduki ruang halaman.
• blok: Elemen akan dipaparkan sebagai elemen peringkat blok, menduduki barisnya sendiri.
• sebaris: Elemen akan dipaparkan sebagai elemen sebaris dan dipaparkan pada baris yang sama dengan elemen sebaris lain.
• blok sebaris: Elemen akan dipaparkan sebagai elemen blok sebaris dan dipaparkan dalam baris yang sama seperti elemen sebaris lain, tetapi atribut seperti lebar dan tinggi boleh ditetapkan.

Berikut ialah contoh yang menunjukkan cara menggunakan sifat paparan CSS untuk menyembunyikan elemen halaman.

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

Dalam kod di atas, kami menggunakan elemen div dengan kotak kelas dan menetapkan atribut paparannya kepada tiada. Ini bermakna elemen div ini tidak akan dipaparkan pada halaman.

3. Atribut keterlihatan CSS

Atribut keterlihatan CSS juga boleh digunakan untuk mengawal paparan dan penyembunyian elemen. Tidak seperti atribut paparan, atribut keterlihatan hanya mengawal sama ada elemen itu boleh dilihat, tetapi tidak menjejaskan reka letak elemen pada halaman. Nilai pilihan untuk atribut keterlihatan termasuk:

• kelihatan: Unsur boleh dilihat, yang sama dengan nilai lalai atribut paparan.
• tersembunyi: Elemen tidak kelihatan tetapi masih menempati ruang halaman.
• runtuh: digunakan untuk elemen jadual Apabila ditetapkan untuk runtuh, elemen itu akan menjadi tidak kelihatan dan sempadan sel akan hilang.

Berikut ialah contoh yang menunjukkan cara menggunakan sifat keterlihatan CSS untuk menyembunyikan elemen halaman.

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

Dalam kod di atas, kami menggunakan elemen div dengan kotak kelas dan menetapkan atribut keterlihatannya kepada tersembunyi. Ini bermakna elemen div tidak akan dipaparkan pada halaman, tetapi ia masih akan menduduki ruang halaman.

4. Cara menggunakan elemen div CSS untuk menunjukkan dan menyembunyikan elemen halaman

Kami telah memperkenalkan ciri paparan dan keterlihatan CSS di atas Seterusnya, kami akan menggabungkan sifat ini untuk melaksanakan butang klik pada halaman , fungsi untuk menunjukkan atau menyembunyikan elemen div.

Kod HTML adalah seperti berikut:

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

Dalam kod di atas, kami mencipta elemen butang dan menambah acara onclick padanya. Kami juga mencipta elemen div dengan kotak kelas, iaitu elemen yang ingin kami sembunyikan atau tunjukkan.

Seterusnya, kami menambah kod berikut pada fail CSS:

.box {
  visibility: hidden;
}

Ini akan menjadikan elemen kotak tidak kelihatan apabila halaman baru dimuatkan.

Akhir sekali, kami menambah kod berikut pada kod JavaScript halaman:

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

Dalam kod di atas, kami mentakrifkan fungsi yang dipanggil toggle() dan mengikatnya Tetapkan pada butang acara onclick. Di dalam fungsi, kami menggunakan kaedah document.querySelector() untuk mendapatkan elemen dengan kotak kelas dan menyemak sama ada atribut paparannya tiada. Jika ya, kami menetapkan sifat paparannya kepada rentetan kosong, dengan itu memaparkan elemen kotak jika tidak, kami menetapkan sifat paparannya kepada tiada, dengan itu menyembunyikan elemen kotak.

Di atas ialah cara menggunakan elemen div CSS untuk memaparkan dan menyembunyikan elemen halaman. Dengan menguasai teknik ini, kami boleh menjadikan halaman kami lebih dinamik dan interaktif.

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