Rumah > Artikel > pembangunan bahagian belakang > Paparkan dan sembunyikan div html
Paparkan dan sembunyikan div html
- WBOYasal
- 2023-05-09 09:30:364112semak imbas
Div HTML ialah elemen reka letak halaman web biasa, yang boleh digunakan untuk membahagikan halaman dan kandungan kumpulan. Kadangkala, kami ingin mengawal paparan dan penyembunyian div secara dinamik berdasarkan interaksi pengguna atau syarat lain Pada masa ini, kami perlu memahami cara menggunakan JavaScript dan CSS untuk memaparkan dan menyembunyikan div.
- Gunakan CSS untuk memaparkan dan menyembunyikan div
Cara paling mudah untuk menggunakan CSS untuk memaparkan dan menyembunyikan div ialah menggunakan atribut paparan. Atribut paparan merujuk kepada mod paparan elemen Ia mempunyai berbilang nilai, seperti blok, sebaris, blok sebaris, tiada, dsb. Antaranya, nilai tiada akan membuatkan elemen hilang sepenuhnya, manakala nilai lain akan membuatkan elemen itu muncul.
Dalam kod di bawah, kami mentakrifkan elemen div dengan id myDiv dan menetapkan atribut paparannya kepada tiada. Ini bermakna pada mulanya, elemen div tidak kelihatan. Seterusnya, kami menetapkan atribut paparan myDiv untuk menyekat melalui JavaScript untuk memaparkannya.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
display: none;
}
</style>
</head>
<body>
<div id="myDiv">这是一个隐藏的div元素</div>
<button onclick="showDiv()">显示div</button>
<script>
function showDiv() {
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>Dalam contoh ini, kami memperoleh elemen div dengan id myDiv melalui kaedah getElementById JavaScript dan menetapkan atribut paparannya untuk menyekat untuk memaparkannya. Apabila pengguna mengklik butang "Tunjukkan div", fungsi showDiv akan dipanggil untuk memaparkan dan menyembunyikan div.
- Gunakan JavaScript untuk memaparkan dan menyembunyikan div
Selain menggunakan atribut paparan CSS untuk mengawal paparan dan menyembunyikan div, kami juga boleh menggunakan JavaScript untuk mencapai ini. Dalam kes ini, kita perlu menggunakan sifat style.display JavaScript untuk mengawal keadaan paparan div.
Dalam contoh di bawah, kami mentakrifkan elemen div dengan id div1 dan menetapkan keadaan awalnya kepada tidak kelihatan. Kemudian, kami mendapatkan elemen melalui kaedah getElementById JavaScript dan menetapkan sifat style.displaynya untuk disekat untuk memaparkannya. Apabila pengguna mengklik butang itu sekali lagi, kami menetapkan sifat style.display div1 kepada tiada untuk menyembunyikannya.
<!DOCTYPE html>
<html>
<head>
<script>
function showHide() {
var div = document.getElementById("div1");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<button onclick="showHide()">显示/隐藏div</button>
<div id="div1" style="display: none">这是一个隐藏的div元素</div>
</body>
</html>Dalam contoh ini, kami memaparkan dan menyembunyikan div dengan mentakrifkan fungsi showHide. Apabila pengguna mengklik butang "Tunjukkan/Sembunyikan div", fungsi showHide akan dipanggil. Dalam fungsi, kita mula-mula mendapatkan elemen div dengan id div1 melalui kaedah getElementById, dan kemudian tentukan nilai atribut style.displaynya. Jika tiada, tetapkannya untuk menyekat dan memaparkannya. Jika tidak, kami menetapkannya kepada tiada, dengan itu menyembunyikannya.
Ringkasan
Div HTML ialah elemen reka letak halaman web biasa Anda boleh memaparkan dan menyembunyikan div dengan mudah menggunakan JavaScript dan CSS. Dengan menggunakan atribut paparan dan atribut style.display, kami boleh mengawal keadaan paparan elemen div untuk memaparkan atau menyembunyikan kandungan secara dinamik mengikut keperluan. Fungsi ini memainkan peranan yang besar dalam mereka bentuk halaman web dinamik, aplikasi interaktif, dsb., dan pemahaman yang mendalam tentang pelaksanaannya adalah sangat penting untuk jurutera pembangunan web.
Atas ialah kandungan terperinci Paparkan dan sembunyikan div html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!