Rumah > Artikel > hujung hadapan web > Cara menggunakan atribut paparan CSS untuk menyembunyikan dan memaparkan elemen div
Cara menggunakan atribut paparan CSS untuk menyembunyikan dan memaparkan elemen div
- PHPzasal
- 2023-04-21 11:20:452141semak imbas
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;
}
- Paparkan elemen div
Gunakan atribut paparan untuk memaparkan elemen div sebagai tahap blok elemen:
div {
display: block;
}
Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen peringkat blok sebaris:
div {
display: inline-block;
}
Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen sebaris :
div {
display: inline;
}
Gunakan atribut paparan untuk memaparkan div Elemen dipaparkan sebagai elemen jadual:
div {
display: table;
}
Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen baris jadual:
div {
display: table-row;
}
Gunakan atribut paparan untuk memaparkan elemen div sebagai elemen sel jadual:
div {
display: table-cell;
}
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>
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!