Bir etiketi / elemanı websayfasından gizlemek için display özelliğini none yapmak yeterlidir. Bu şekilde bir işlem yapılığında etiket sayfadan kaybolacaktır. Bunu hem CSS ve hemde JavaScript ile yapabiliriz.
Kod içerisinde bu işlemi gerçekleştirmemiz gerektiğinde ilgili DOM elementini bulup, onun style.display özelliğini none yapıyoruz. Şimdi bunun için bir örnek yapalım.
JavaScript İle DIV Gizleme Örneği
Elimizde kutu id değerine sahip olan bir DIV etiketini sayfada gizleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div
id="kutu"
style="width: 200px;
height: 200px;
background: gray;
padding: 40px"
>
Kutu
</div>
<button id="btn"
style="margin: 35px">
Kutuyu Gizle
</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const box = document.getElementById("kutu");
// 👇️ Eleman DOM'dan silinir
kutu.style.display = "none";
});
</script>
</body>
</html>
- Öncelikle kutu ID değerine sahip bir DIV oluşturduk.
- Sistemin nasıl çalıştığını görmemiz için ayrıca btn ID değerine sahip bir buton oluşturduk.
- DOM üzerinde butonu bulmak için
const btn = document.getElementById("btn");satırını kullandık. - addEventListener ile butona bir click eventi ekledik.
- Sonrasında butona tıklandığında, tanımladığımız event içerisinde
kutu.style.display = "none";kodu ile kutuyu DOMdan sildik.
Eğer tekrar bu etiketin görünür olmasını istersek
kutu.style.display = "block";
şeklinde display değerini block yapmamız yeterli olacaktır.
display = none şeklinde bir etiketi gizlemek istediğinizde DOM üzerindeki alanını da silmiş olursunuz. Artık o etiket DOM üzerinde götüntülenmez.
visibility Özelliğini Kullanma
Eğer sadece etiketin gizlenmesini ve aynı anda DOM üzerinde yer kaplamasını istiyorsak o zaman visibility özelliğini kullanmamız gerekir. Bu CSS visibility özelliğidir ve bu değeri hidden yaptığınızda etiket gizlenecek fakat sayfada yer kaplamaya devam edecektir. Aynı örneği visibility özelliği ile yaparak farkı görelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div
id="kutu"
style="width: 200px;
height: 200px;
background: gray;
padding: 40px"
>
Kutu
</div>
<button id="btn"
style="margin: 35px">
Kutuyu Gizle
</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const box = document.getElementById("kutu");
// 👇️ Eleman DOM'dan silinir
kutu.style.visibility = "hidden";
});
</script>
</body>
</html>
Örneği çalıştırıp butona tıkladığımızda kutu görünürlüğünü kaybedecek ama yine DOM üzerindeki yerini muhafaza edecektir.
Bir visibility = “hidden” yaparak gizlenen bir etiketin tekrar görünmesi için visibility = "visible"; yapılması yeterlidir.
Son Sözler
Bir elemanı DOM üzerinden tamamen silmek için display değerini none yapmak gerekir. Bu durumda etiken DOMdan silinecek ve yer kaplamayacaktır. Eğer sadece etiketi gizlemek iserseniz bu durumda visibility değerini hidden yapmak gerekir. Bu durumda etiket görüntülenmez ve fakat DOM üzerindeki yerini korur.
Eklemek istedikleriniz varsa veya sorularınız bulunuyorsa lütfen yorumlara yazın.