Cara menggunakan CSS untuk mengawal keterlihatan elemen halaman web

Dalam reka bentuk web, CSS merupakan bahagian penting dalam mengawal gaya halaman. Selain menetapkan penampilan halaman web, CSS juga boleh menetapkan keterlihatan elemen. Artikel ini akan memperkenalkan anda kepada cara menggunakan CSS untuk mengawal keterlihatan elemen halaman web dan cara menggunakannya dalam projek sebenar.

1. CSS menetapkan keterlihatan elemen

CSS menyediakan dua sifat untuk mengawal keterlihatan elemen: keterlihatan dan paparan. Kegunaan dan kesannya adalah berbeza, dan kami akan memperkenalkannya secara berasingan di bawah.

1. atribut keterlihatan

Atribut keterlihatan digunakan untuk menetapkan keterlihatan elemen Ia mempunyai nilai atribut berikut:

kelihatan (nilai lalai ): elemen Kelihatan;

tersembunyi: elemen tidak kelihatan, tetapi masih mengekalkan ruang yang didudukinya;

runtuhkan: hanya digunakan untuk elemen jadual, melipat baris atau lajur jadual dan tidak memaparkan kandungan biasa.

Sebagai contoh, kita boleh menetapkan visibility:hidden untuk div untuk menjadikannya tidak kelihatan:

div {
  visibility: hidden;
}

2. atribut paparan

atribut paparan digunakan Tetapkan mod paparan elemen. Terdapat nilai atribut berikut:

blok: elemen dipaparkan pada tahap blok dan menduduki satu atau lebih baris

sebaris: elemen dipaparkan sebaris dan dipisahkan daripada elemen sebaris lain Paparan sebelah menyebelah;

sebaris-blok: Elemen dipaparkan pada tahap blok sebaris dan dipaparkan bersebelahan dengan elemen sebaris lain, tetapi atribut seperti lebar dan tinggi boleh ditetapkan;

tiada: Unsur tidak kelihatan dan juga Ruang yang didudukinya tidak dikekalkan.

Contohnya, kita boleh menetapkan paparan:tiada untuk sejengkal untuk menjadikannya tidak kelihatan:

span {
  display: none;
}

2. Contoh aplikasi CSS

1. "Kembali ke atas " Butang

Kita sering dapat melihat kewujudan butang "Kembali ke Atas" pada sesetengah tapak web. Pada masa ini, kita boleh menggunakan kawalan keterlihatan untuk hanya memaparkan butang apabila bar skrol halaman telah ditatal ke kedudukan tertentu.

Bahagian HTML:

<a href="#" id="back-to-top">返回顶部</a>

Bahagian CSS:

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: none;
}

#back-to-top.show {
  display: block;
}

Bahagian JavaScript (jQuery):

$(window).scroll(function() {
  if ($(this).scrollTop() > 500) {
    $('#back-to-top').addClass('show');
  } else {
    $('#back-to-top').removeClass('show');
  }
});

Kod di atas melepasi pendengar Kedudukan bar skrol halaman, apabila melebihi 500 piksel, butang "kembali ke atas" dipaparkan, jika tidak, butang itu disembunyikan.

2. Fungsi "tunjukkan/sembunyikan" jadual

Dalam beberapa kes apabila jumlah data dalam jadual adalah besar, kita boleh menggunakan kawalan keterlihatan untuk melaksanakan Fungsi "tunjukkan/sembunyikan" fungsi Sembunyikan jadual" untuk meningkatkan pengalaman pengguna.

Bahagian HTML:

<button id="toggle-table">显示/隐藏表格</button>

<table id="data">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Bahagian CSS:

#data {
  display: none;
}

Bahagian JavaScript (jQuery):

$('#toggle-table').click(function() {
  $('#data').toggle();
});

Dalam kod di atas, Kami menetapkan paparan: tiada untuk elemen jadual, menjadikannya tidak kelihatan pada mulanya. Kemudian, dalam JavaScript, kami menggunakan kaedah togol() untuk menogol keterlihatan jadual apabila pengguna mengklik butang "Tunjukkan/Sembunyikan Jadual".

3. Nota

1. Selepas menetapkan paparan:tiada, elemen tidak akan mengekalkan ruang yang didudukinya. Oleh itu, apabila anda perlu menggunakan elemen ini, tukarkannya secara dinamik kepada display:block atau nilai lain dalam JavaScript. Keterlihatan elemen
2. mungkin dipengaruhi oleh tetapan pada elemen induk atau nenek moyang. Sebagai contoh, apabila elemen induk ditetapkan kepada visibility:hidden, elemen anak juga tidak akan kelihatan.
3. Jangan menyalahgunakan kawalan keterlihatan elemen, ia harus ditetapkan mengikut keperluan sebenar. Penggunaan kawalan keterlihatan yang berlebihan boleh menyebabkan kekacauan kod dan prestasi yang lemah.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan CSS untuk mengawal keterlihatan elemen halaman web. Selain meningkatkan interaktiviti dan pengalaman pengguna halaman, mengawal keterlihatan elemen juga boleh menjimatkan overhed sumber halaman dengan berkesan. Oleh itu, dalam projek sebenar, kita harus menggunakan CSS secara fleksibel untuk menetapkan keterlihatan elemen.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mengawal keterlihatan elemen halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!