Javascript ile sitil bilgisi alma

Bu benim blogdaki ilk anlatımım. Anlatımdaki eksiklikleri hoşgörünüze bırakıyorum ve anlatıma geçiyorum.
Web sayfalarımızda kullandığımız html elementlerinin stil bilgilerini şu şekilde alabiliriz;

eleman.style.width;

Ancak bu şekilde sadece html elemanının stil özelliğini biz belirlemişsek bu bilgilere ulaşabiliriz. Örneğin sayfamıza bir eleman ekledik ve bu elemanı css yardımıyla ortaladık. Ortalanmış nesnesin koordinatlarına yukarıda gösterdiğim şekilde erişemeyiz. Yukarıdaki gösterdiğim şekilde sadece style özelliğinde belirlediğimiz stil bilgilerine erişebiliriz.

Bu durumun üstesinden gelmek için javascript bize bazı metodlar (fonksiyonlar) sunuyor. Ben şimdi bu yazımda bu metodlara değineceğim. (Javascript’de fonksiyonlarda birer nesne olduğu için fonksiyon yerine metod kelimesini kullanmayı tercih ettim.)

Bu sorunumuzu çözmek için kullanacağımız metodlardan internet explorer tarayıcısı için (microsoft tarafından geliştirilen) olanı “currentStyle” nesnesidir.

Elemanımızın stil bilgisine erişmek için bu objeyi şu şekilde kullanabiliriz:

#ornek {
	margin:0 auto;
	width:50px;
	height:50px;
	border:1px solid #000;
}

Aynı işlemi diğer tarayıcılarda yapmak için ise şu metodları kullanıyoruz:

document.defaultView.getComputedStyle(eleman,null).getPropertyValue(ozellik);
( getComputedStyle metodunun ilk argümanı dökümandaki elemanı, ikincisi ise pseudo değerini alır. )

Aynı fonksiyonu şu şekle çevirirsek i.e. dışındaki tarayıcılarda çalışır.

function sitil_al(nesne,ozellik) {
	deger = document.defaultView.getComputedStyle(nesne,"").getPropertyValue(ozellik);
	alert(ozellik+" değeri : " + deger );
}

Şimdi fonksiyonumuzu tüm tarayıcılarda çalışacak şekilde yapalım.

function sitil_al(nesne,ozellik) {
	// document.all sadece ie'de vardır. varlığını kontrol ederek tarayıcıyı belirlemiş oluyoruz.
	if(document.all) {
		return nesne.currentStyle[ozellik];
	} else {
		return document.defaultView.getComputedStyle(nesne,"").getPropertyValue(ozellik);
	}
}

Buraya kadar olan kısım işimizin çoğunu çözüyor. Ancak nesnelerin bazı özellikleri farklı tarayıcılarda farklı isimlerde işleniyor. Mesela nesnenin saydamlık değeri Internet Explorer’da filter özelliğiyle veriliyor. örnek : ” filter: alpha(opacity = 50); ”
diğer tarayıcılarda ise opacity özelliğiyle veriliyor. Örnek : ” opacity: 0.5; ”
Birde stil özellikleri belirtilirken bazı özellik adlarının içerisinde geçen ” – ” (tire) nin farklı anlam ifade etmesi.
Örnek verecek olursak; ie (internet explorer) currentStyle objesinde “background-color” değerini “backgroundColor” ismiyle tutuyor. Ancak diğer tarayıcılar bu şekilde çalışmıyor.

Bu durumların üstesinden gelmek için ise yukarıda yazdığımız son fonksiyonun üzerinde bir kaç değişiklik yapabiliriz.

Üzerinde değişiklik yapılmış fonksiyonun son hali :

function stil_al(nesne,ozellik) {
	sonuc = '';
	// Eğer internet exploer ise ve ozellik opacity ise
	if(document.all && ozellik=='opacity') {
		// ozellik değerini değiştir ve filter yap.
		ozellik = 'filter';
	}
	if(nesne.currentStyle) {
		// ozellik içinde - geçiyorsa tireyi sil ve tireden sonraki ilk harfi büyüt.
		ozellik = ozellik.replace(/-(w)/g, function (icerik_match, p1){return p1.toUpperCase();});
		sonuc = nesne.currentStyle[ozellik];
	} else {
		sonuc = document.defaultView.getComputedStyle(nesne, "").getPropertyValue(ozellik);
	}
	return sonuc;
}

Sonraki makalede görüşmek dileğiyle…