dhtml_2_taraciyla_ayni_isi_yapab.htm

dhtml - İki tarayıcının aynı işi yapabilmesi

Şimdide bir bloğun zemin renginin nasıl değiştirilebileceğini görelim. Bu örneğimizin diğer iki örnekten farlı olan tarafı javascript ile bir fonksiyon tanımlayacak olmamız ve sonrada bu fonksiyon üzerinden zemin rengini değiştirecek olmamızdır. Bunun nedeni ise iki browser içinde tek bir ifadeyi kullanmak ve sayfamızın iki browser üzerinden de çalışmasını sağlamaktır.

Öncelikle bloğumuzu tanımlayalım.

<DIV ID="alan"
STYLE="margin : 20; background-color: gray;
width: 300; height:100;
border-style:solid; border-color:red;
border-width:1"
onClick="zRenginiDegistir('alan')">
alan kimliği verdiğimiz bir blok.
</DIV>

Tanımladığımız elemana alan adı verdik. Biz bu elemanın değişik özelliklerini artık IDsi ile kolaylıkla denetleyebileceğiz.

Şimdide scriptimizi hazırlayalım. Scriptimizi hazırlarken ilk olarak browser seçimi yapacağız.


ie = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;

Browser tanımlamasını yaptıktan sonra fonksiyonumuzu yazmaya başlayabiliriz. Fonksiyonumuz katmanın ismini alacak sonra elemanın zemin rengini öğrenecek, ardındanda yeni zemin rengini belirleyecek ve yeni zemin rengini uygulayacak.


function zRenginiDegistir(katman)
{
if(ie)
{
eskiRenk = document.all[katman].style.backgroundColor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
document.all[katman].style.backgroundColor=yeniRenk;
}
if(ns6)
{
eskiRenk = document.getElementById(katman).style.backgroundColor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
}
}

Fonksiyonumuzda browseri konrollerini yaptık ve sonuca göre farklı işlemlerin yapılmasını sağladık. Önce eskiRenk adlı değişkenimize kullandığımız katmanın zemin rengini atadık. Sonra bu renge göre yeniRenk değişkenine bir değer atayarak her tıklamada bloğumuzun zemin renginin değişmesini sağladık.

Aşağıda tüm ifadeleri görebilirsiniz.


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
ie = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;
function zRenginiDegistir(katman)
{
if(ie)
{
eskiRenk = document.all[katman].style.backgroundColor;
if(eskiRenk == 'gray') yeniRenk = 'yellow';
else yeniRenk = 'gray';
document.all[katman].style.backgroundColor=yeniRenk;
}
if(ns6)
{
eskiRenk = document.getElementById(katman).style.backgroundColor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
document.getElementById(katman).style.backgroundColor=yeniRenk;
}
}
</SCRIPT>
<HEAD>
<BODY>
<DIV ID="alan"
STYLE="margin : 20; background-color: gray;
width: 300; height:100;
border-style:solid; borde-color:red;
border-widht:1"
onClick="zRenginiDegistir('alan')">
alan kimliği verdiğimiz bir blok.
</DIV>
</BODY>
</HTML>
 
Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol