Elementlarni yashirish
CSS display: none;
display: none; ishlatilganda element hujjat oqimidan butunlay yashiriladi va hech qanday joy egallamaydi.
U elementlarni o‘chirib qayta yaratmasdan yashirish yoki ko‘rsatish uchun ko‘pincha JavaScript bilan birga ishlatiladi.
Yashirilgan panelni ko‘rsatish uchun bosing
Bu panel standart holatda display: none bilan yashirilgan <div> elementini o‘z ichiga oladi.
Uni ko‘rsatish uchun JavaScript dan foydalanamiz (ko‘rsatish uchun o‘zgartiring: blok).
Misol
Bosish hodisasida yashirilgan elementni ko‘rsatish uchun CSS va JavaScript’dan qanday foydalanish:
<style>
#panel {
display:
none;
}
</style>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
O‘zingiz sinab ko‘ring »
Misol
Bosish hodisasida ko‘rsatish va yashirish orasida almashish uchun CSS va JavaScript’dan qanday foydalanish:
<style>
#panel {
display:
none;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("panel");
if (x.style.display ===
"none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
O‘zingiz sinab ko‘ring »
Elementni yashirish - display:none yoki visibility:hidden ishlatilsinmi?
display:none
Olib tashlash
visibility:hidden
Yashirish
Reset
Barchasini tiklash
Elementni yashirish display xossasini none qilish orqali amalga oshiriladi. Element yashirin bo‘ladi va sahifa element umuman yo‘qdek ko‘rsatiladi:
Elementni yashirish uchun visibility:hidden; dan ham foydalanishingiz mumkin.
Biroq bu xossa bilan element yashirin bo‘lsa ham, u ko‘ringandek bir xil joyni egallayveradi:
CSS Display/Visibility xossalari
| Xususiyat | Tavsif |
|---|---|
| display | Element qanday ko‘rsatilishi kerakligini belgilaydi |
| visibility | Element ko‘rinadigan yoki ko‘rinmasligini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!