Cara menggunakan atribut paparan CSS untuk menyembunyikan dan memaparkan elemen div-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan atribut paparan CSS untuk menyembunyikan dan memaparkan elemen div

PHPz

Lepaskan： 2023-04-21 13:55:22

asal

2194 orang telah melayarinya

Sembunyikan atau tunjukkan elemen tertentu pada halaman selalunya menggunakan atribut paparan CSS. Dalam artikel ini, kami akan menumpukan pada cara menggunakan atribut paparan CSS untuk menyembunyikan dan menunjukkan elemen div.

1. Atribut paparan CSS

Atribut paparan CSS mempunyai banyak nilai, antaranya nilai yang biasa digunakan adalah seperti berikut:

tiada : elemen tersembunyi dan membebaskan ruang yang diduduki oleh elemen.
blok: Paparkan elemen sebagai elemen peringkat blok.
blok sebaris: Paparkan elemen sebagai elemen tahap blok sebaris.
sebaris: Paparkan elemen sebagai elemen sebaris.
jadual: Paparkan elemen sebagai elemen jadual.
baris jadual: Paparkan elemen sebagai elemen baris jadual.
sel jadual: Paparkan elemen sebagai elemen sel jadual.

2. Gunakan atribut paparan untuk menyembunyikan dan menunjukkan elemen div

Sembunyikan elemen div

Gunakan atribut paparan untuk menyembunyikan dan lepaskan elemen div Ruang yang diduduki oleh elemen:

div {
  display: none;
}

Salin selepas log masuk

Paparkan elemen div

Gunakan atribut paparan untuk memaparkan elemen div sebagai tahap blok elemen:

div {
  display: block;
}

Salin selepas log masuk

Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen peringkat blok sebaris:

div {
  display: inline-block;
}

Salin selepas log masuk

Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen sebaris :

div {
  display: inline;
}

Salin selepas log masuk

Gunakan atribut paparan untuk memaparkan div Elemen dipaparkan sebagai elemen jadual:

div {
  display: table;
}

Salin selepas log masuk

Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen baris jadual:

div {
  display: table-row;
}

Salin selepas log masuk

Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen sel jadual:

div {
  display: table-cell;
}

Salin selepas log masuk

3 Gunakan JavaScript untuk mengawal penyembunyian dan paparan elemen div

Jika anda mahu untuk mengawal penyembunyian dan paparan elemen div apabila pengguna mengklik butang, anda boleh menggunakan JavaScript untuk mencapai ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示/隐藏div元素</title>
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      display: block;
    }
  </style>
</head>
<body>
  <button onclick="toggleDiv()">显示/隐藏div元素</button>
  <div id="myDiv"></div>
  <script>
    function toggleDiv() {
      var div = document.getElementById("myDiv");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh, apabila pengguna mengklik butang, elemen div dengan id myDiv diperoleh melalui JavaScript, dan ia ditentukan sama ada atribut gaya paparan elemen itu tiada. ia ditetapkan untuk menyekat, jika tidak, tetapkannya kepada tiada. Ini melaksanakan penyembunyian dan paparan elemen div.

Ringkasan

Melalui pengenalan artikel ini, kita dapati bahawa atribut paparan CSS ialah atribut yang sangat penting yang digunakan untuk mengawal paparan dan keadaan tersembunyi elemen pada halaman. Sama ada anda mengawal secara langsung keadaan elemen melalui CSS atau melaksanakan fungsi interaktif melalui JavaScript, adalah sangat perlu untuk menguasai penggunaan atribut paparan.

Atas ialah kandungan terperinci Cara menggunakan atribut paparan CSS untuk menyembunyikan dan memaparkan elemen div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!