Yürürlükteki Biçem Sayfası Değerlerinin Okunması

Yürürlükteki Biçem Sayfası Değerlerinin Okunması
--------------------------------------------------------------------------------
Yürürlükteki biçem değerlerini okumak ve yazmak

Amaç
--------------------------------------------------------------------------------

imi ya da içerilmiş (imported) biçem sayfaları yolu ile ayarlanmış değerleri belirleyen bir betik yazmak...

İşleyiş
--------------------------------------------------------------------------------

Öncelikle bir html iminin bir biçem özelliğinin değerinin "nesne.style.ozellikAdi" biçiminde bir yazımla öğrenilmesinin olanaklılığı araştırıalım:





BAŞKALARININ AŞKLARIYLA BAŞLIYOR HAYATIMIZ
VE DEVAM EDİYOR BAŞKALARININ HINÇLARIYLA








İşte yukarıdaki koddiziminde, "nesne.style.backgroundColor" biçimindeki bir nesne özellik iliklenmesi işe yaramakta ve bize alert(nesne.style.backgroundColor); satırı ile, #fac296 değerini vermektedir. Peki bu değeri nereden almaktadır? Tabiki iminin style niteliğinden:



Peki koddizimi, satır içi biçem atamasıyla değil de satırdışı biçem tanımlamasıyla yapılmış olsaydı ne olacaktı ( imleri arasında belge başında tanımlanarak ya da satırında olduğu gibi belge dışındaki bir yerden çağırılarak)




#tas { background-color: #FAC296; width:400;}




VE DEVAM EDİYOR BAŞKALARININ HINÇLARIYLA
(İsmet Özel)







Evet aynı satırlar şimdi çalışmıyor!.. Boş bir katar değeri taşıyan bir bilgi yüzü ile karşılaşıyoruz. Ya yazacağımız betik (script), bu biçem değerlerini öğrenmemizi kaçınılmaz kılıyorsa!... O durumda bu değerleri öğreneceğiz!.. Nasıl mı?... Öncelikle Internet Explorer'ın bu konumdaki kolaylığından söz edelim!.. Evet İnternet Explorer bize yürürlükteki biçem değerini öğrenmemiz için currentStyle özelliğini sunar. Bu özellik birçok biçem özelliğini kendinde tutar ama hepsini değil. Şimdi yukarıdaki betikdizimini bu özellikle yeniden düzenleyip,

alert(nesne.style.backgroundColor);

satırını;

alert(nesne.currentStyle["backgroundColor"]);

olarak değiştirelim ve betiği çalıştıralım. İşte Explorer'ın yardımıyla yürürlükteki biçem özelliğini ve değerini yeniden öğrenebildik. Ya peki diğer tarayıcılarda bu iş nasıl olacak?.. Yani Netscape, Opera, Firefox gibi Mozilla-temelli tarayıcılarda bu özellik nasıl elde edilecek!.. İşte o zaman da W3C DOM'un window nesnesinin yöntemlerini kullanacağız!.. Onlar da şunlardır :

window.getComputedStyle();

ve

getPropertyValue();

o da imleri arasında şöyle bir betik dizimini gerektirir:

var nesne = document.getElementById("tas");
var guncelBicem = window.getComputedStyle(nesne, "");
alert(guncelBicem.getPropertyValue("background-color");



yine çalıştıralım ama Explorer'da değil Opera, Netscape ya da Firefox'ta. İşte yeniden gördük zemin renginin değerini!.. Yalnız, Netscape ile Firefox rengin değerini RGB olarak vermektedir. Explorer'la Opera'da 16lık değerde vermektedir.

Geriye son bir şey kalıyor tüm bu tarayıcılarca çalışabilecek bir betikdiziminin yazılması!.. İşte o betiği bir işlev içine paketlersek aşağıdaki gibi bir betik dizimi elde ederiz:

function ogeBicemiAl(ogeID, IEBicemOzelligi, CSSBicemOzelligi){

var nesne = document.getElementById(ogeID);

if(nesne.currentStyle){
alert(nesne.currentStyle[IEBicemOzelligi]);
}
else if(window.getComputedStyle){
var guncelBicem = window.getComputedStyle(hedef, "");
alert(guncelBicem.getPropertyValue(CSSBicemOzelligi));
}
return"";
}



Son aşamadaki betik dökümü aşağıdaki gibi olabilir:




#tas { background-color: #FAC296; width:400;}



BAŞKALARININ AŞKLARIYLA BAŞLIYOR HAYATIMIZ
VE DEVAM EDİYOR BAŞKALARININ HINÇLARIYLA
(İsmet Özel)