Javascript ile “display:none / block”

28 / Şubat / 2008 İsa Engiz    javascript     javascript Henuz Yorum Yapilmamis.

Önceki yazılarımızda javascript-innerHTML kullanarak bir içeriği göster – gizle uygulaması yapmıştık. Ona benzer bir uygulamayı ise innerHTML kullanmadan, javascript ile doküman elemanının sitil özelliğini değiştirerek yapabiliriz.

Bize bu konuda yardıma koşan CSS kodu “display:none; display:block;”. Bunun bir örneğini görmek için buraya tıklayabilirsiniz, dosyaları ise buradan indirebilirsiniz.

Adım 1

Başlamadan önce dokümanda tıklamadan sonra gösterilecek içeriği belirliyoruz ve onu div etiketi içerisine alıyoruz:

<div id="icerik">
 
<p>selamlar, bu da bir başka yazı</p>
<p>bu da bir başka paragraf...</p>
 
</div>

Adım 2

Daha sonra bu içeriğin gösterilmesini engelleyecek olan CSS kodunu ekliyoruz:

#icerik
{
	display:none;
}

Böylece sayfa yüklendiği zaman “icerik” id’sine sahip eleman gözükmeyecek.

Adım 3

Dokümanda tıklanınca içeriği gösterecek bağlantıya javascript fonksiyonunu ekliyoruz:

<a href="#" onclick="goster()">buraya</a>

Adım 4: Javascript kodu

son olarak javascript kodunu yazmalıyız:

var sayi = 0;
function goster()
{
	if (sayi == 0)
	{
		document.getElementById("icerik").style.display = "block";
		sayi = 1;
	}
	else
	{
		document.getElementById("icerik").style.display = "none";
		sayi = 0;
	}
}

Burada yaptığımız ilk önce “sayi” isimli bir değişken oluşturmak. Bu değişkenin görevi tıklama alanına tıklandığında “icerik” alanının gösterilip gösterilmediğini öğrenmek. sayfa yüklendiğinde varsayılan olarak sayi=0 durumunda. Eğer içerik gösterilmiyorsa;

if (sayi == 0)
{
	document.getElementById("icerik").style.display = "block";
	sayi = 1;
}

kodun bu bölümü çalışıyor, javascript ile “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyoruz ve “block” yapıyoruz. Ayrıca şu anda “icerik” kısmı görünür hale geldiğinden “sayi” değişkenini 1 yapıyoruz.

İçerik gösteriliyorken tıklanırsa kodun ikinci kısmı çalışıyor:

else
{
	document.getElementById("icerik").style.display = "none";
	sayi = 0;
}

Bu kod parçası da aynı şekilde “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyor ve katmanı tekrar gizliyor.

İçeriği “gösterip – gizleme” uygulaması javascript ile doküman elemanlarının sitil özelliklerinin değiştirilmesiyle daha kolay olmakta. Daha sonraki yazılarda ise bu özelliği kullanmanın bize neler sağladığını göreceğiz…

Bu yazıyı beğendiyseniz, paylaşabilirsiniz: