 |
Javascript Yazılım Kuralları (JS)
22 Aralık 2007
DHTMLJavascript kodlarının en çok kullanıldığı alan DHTML'dir (Dynamik Hypertext Markup Language). Dosdoğru konuşmak gerekirse DHTML Javascript kodlarını HTML öğelerinin CSS stillerini değiştirmek için kullanır. Tüm tarayıcılar burada anlatılandan çok daha fazlasını desteklerler. Bu nedenle anlatımda dördüncü kuşak tarayıcılar üzerinde odaklanılacaktır. Eski tarayıcılar DHTML olanaklarını sınırlar ve ancak temel DHTML komutlarını desteklerler. Ama hala açılan menüler, kayan mesajlar, fare izleyiciler ve düşen kar etkilerini destekleyecek esneklikleri vardır. Bu sayfanın bir parçasının görünmesini ya da saklanmasını (gizlenmesini) gerektirir. Bu, güvenilir biçimde, "div" öğesi kullanarak gerçekleştirilir. Bir çok kez "span" öğesi "position: absolute;" ya da "position: relative;" stiliyle yerleştirildiğinde (görüntüleme biçimini değiştirme dışında) kullanılır. Aslında "div" öğesini hemen herşey için kullanabilmek kolaylığı vardır. Bazı eski tarayıcıların (Netscape 4 gibi) "span" yerleşiminde "position: absolute;" ile sorunları olur. Bir kez HTML hazırladıktan sonra (hatalar için düzeltmeler ve olayı çevirme kodları da kullandıktan sonra) yerleşmiş bir öğeye başvurabilirsiniz. Bu başvuruyla görünebilirlilik (visibility), yerleşim (position), art alan rengi (background color), z-index, kesme (clipping) ve yerleştirilmiş öğenin boyutlarında değişiklik yapabilirsiniz. Yerleşmiş bir öğenin içeriğini değiştirebilirsiniz ya da sayfa yüklendikten sonra başka öğeler yaratabilirsiniz. DHTML tüm sayfanın art alan rengini değiştirmenizi de sağlar. Her öğenin görünme stilini değiştirme olanağı verir. Üzücü ama DHTML her zaman tarayıcı bağımlıdır. Diğer bir deyimle her tarayıcı değişik komutlar ister. Teknikleri kullanarak, bunları yapmak zor değildir. Tarayıcı hangi yazım kuralını kabul ederse etsin, kodlama neyi denetleyeceğini bilir ve doğru kullanır. Bir çok kodlayıcı bir tarayıcıyı yakalayınca, diğer özelliklerin çalışacağını varsayar ya da bir özelliğin çalıştığını bulunca diğerlerinin de çalışacağını varsayar. Bu tür hatalı varsayımlara burada yer verilmemiştir. Dördüncü Kuşak TarayıcılarBazı tarayıcılarda DHTML yapılabilir. Bunlara 'sürüm 4' ya da 'Dördüncü kuşak' denir. Kendi sürüm sayıları farklı olabilir. Aşağıdaki liste değişik tarayıcılar için özellikleri tanımlar. Bu tarayıcının yorumlayıcıları başka tarayıcılar tarafından da kullanılır.
Büyük/Bilinen/Önemli Tarayıcılar
Orta Ölçek tarayıcılar
Küçük tarayıcılarBu tarayıcılar çok kullanılmaz ya da tarayıcıların son sürümleri değildir. Bazılarında belirgin hatalar vardır. Kapasiteleri sınırlıdır ya da olay algılamada sınırlıdır.Bunların bazıları Mozilla Organizasyonunun Java tabanlı Rhino Javascript makinasını (yorumlayıcını) kullanır. Rhino Javascript makinası yalnız Javascript dili yorumlayıcısını güçlendirir, web sayfasıyla javascript arasındaki ilişkiyi yönetmez. Her tarayıcının kendi DHTML (ya da DOM) uyarlaması vardır.
Televizyon ya da mobil donanım tarayıcılarıÜzerinde çalıştığı donanımın sınırlamaları nedeniyle bu tarayıcıların olay algılama yetenekleri sınırlıdır.
Daha fazla bilgiBu tarayıcılar için daha çok bilgi 'Dördüncü Kuşak' Tarayıcılar. listesinden elde edilebilir.(Bu siteyi de oldukça tamamlanmış listei olarak kullanabilirsiniz). Konqueror 2'de birçok Javascript ve DHTML işlevleri çalışsa da tarayıcı olayları algılamada yetersizdi. Bu nedenle birçok DHTML sayfası çalışmaz. Konqueror 3 yeniden ele alındığı için daha iyidir. Burada Konqueror 3+ karşılaştırmalarına yer verilmiştir. NetBox, iPanel MicroBrowser ve OpenTV yetenekleri konusunda bir bilgi yoktur. Netboz sitesinde yarım CSS 2 desteği olduğu yazılıdır. Bu kısaca CSS yerleştirme diye varsayılabilir. Aynı sitede W3C DOM 1 olduğu yazıldığına göre DHTML varsayımı yapılabilir. OpenTV mutlak CSS ve DOM DHTML olduğunu ileri sürer. iPanel MicroBrowser için EIS ileri modüllerinin DOM kodunu algıladığını ileri sürülür. Bunlar innerHTML desteklemiyor olabilirler, çünkü bu özellik DOM standartları arasında yoktur. Escape 4, Netscape 4 gibi layers türü tarayıcıdır. Netscape yazım kurallarını destekler. Aynı zamanda stil nesneleriyle öğelerin stilini değiştirmeyi de yapabilir (kesme/clipping yoktur). WebTV 2.8+ her iki yazım kuralını da destekler ama özel DOM tarayıcısıdır. HTML kurma/hazırlamaİlgi çeken iki tür yerleştirme vardır. Mutlak (absolute) ve göreceli (relative). Mutlak yerleştirme, öğenin istenilen herhangi bir yere konumlanmasını sağlar. Göreceli yerleştirme, öğenin olması gereken yerini konumlanmasını sağlar. Ve belirlenen uzaklığa (offset) konumlanır.DHTML sayfalarının birçoğu mutlak yerleştirilmiş öğelerdir. Göreceli yerleştirilen öğeler 'clip' (küpüri/kesme) stilini kabul etmez. Göreceli yerleştirilen öğelerin önemi, mutlak yerleştirilen öğelere taşıyıcılık etmeleridir. Yani mutlak yerleştirilen bir öğeyi, göreceli yerleştirilen bir öğenin içinde tanımlarsanız, onun yerleşimi görecelinin yerleşimiyle bağlantılıdır. Ana sayfayla ilgisi olmaz... Aşağıdakini kullanarak mutlak yerleştirilen öğe yapabilirsiniz:
<div id="mydiv" style="position: absolute; left: 10px; top: 120px;">
contents
</div>
Ve göreceli yerleştirilmiş bir öğeyi aşağıdaki gibi tanımlarsınız:
<div id="mydiv" style="position: relative; left: 10px; top: 120px;">
contents
</div>
ID önemlidir. Yerleştirilmiş bir öğeye erişim onunla yapılır. Layers tarayıcıları bu yerleştirilmiş öğelere 'layers' adını verirler.
Hatalar ve Hatayı Geçme'document.write' kullanarak yerleştirilmiş öğe yaratacak olunuzsa Netscape 4 sayfayı yükleyemez. Hata verir. O halde bu türün kullanımını kaldırmalısınız. Gerçekten desteklemez istiyorsanız o zaman <layer ...> biçimini mutlak yerleştirilen öğeler için kullanırsınız. <ilayer ...> biçimini ise göreceli yerleştirilen öğeler için kullanırsınız. Eğer kullanacaksaniz (document.layers) ile varlığını denetlemeyelibilirsiniz.Aynı biçimde Netscape 4'de satır içi stil nitelikleri kullanan stilleri, yerleştirilmiş öğelerde kullanmak sayfanın yüklenmesine neden olur. Bunlar yerine öğeler için 'class' tanımlamak ve onları ana stilsayfasına yerleştirmek sorunu çözer. Yerleştirilmiş öğeye başvuru/erişim
Yerleştirilmiş öğelere erişim için birçok yol vardır. W3C DOM standartı bu işin resmi yoludur. Var olan tarayıcılarla desteklenen bir yoldur. Eski tarayıcılar için iki seçenek daha vardır. Bu seçeneklerden birinin iki değişik sürümü vardır. DOMDOM tarayıcıları bir öğeye erişim için document.getElementById yöntemini kullanırlar. Bu yöntemi kullanmak için bzasit bir if deyimi yeterlidir.
if( document.getElementById ){
var myReference = document.getElementById('divID');
}
Tescilli DOMTescilli DOM tarayıcıları document.all birikimini öğeye erişim için kullanırlar. Bazı tarayıcılar hem DOM hem de tescilli DOM erişim yöntemlerini birlikte kullanırlar.
if( document.all ){
var myReference = document.all['divID'];
}
Katmanlar (Layers)Layers tarayıcıları document.layers birikimini öğelere erişimde kullanırlar. 'layers' birikimindeki katmanlara ya ID ya da sayısal dizin değeriyle erişilebilir. Bunlar document.divID (divID belirtilen 'div'in 'id' değeridir) ile de öğeye erişebilir. Netscape 4 ana 'layer' tarayıcısıdır ve ilk DHTML destekleyen tarayıcıydı. Bugünün tarayıcılarında 'layers' yaklaşımı kullanılmamaktadır.
if( document.layers ){
var myReference = document.layers['divID'];
}
Katmanların bir başka davranışı var ki, diğer yaklaşımlardan farklı olmalarına neden olur. Eğer yerleştirilmiş bir öğe diğer yerleştirilmiş öğenin içinde olursa, içerde olan 'layers' (katmanlar) birikimin içindeymiş gibi görünmez. Aslında dış katmandaki belge nesnesinin içindeymiş gibi davranır. Bunun anlamı ID değeriyle bir katmana erişmek için belgedeki tüm katman birikimlerinin tarayıp uygun olanı bulunca durulmalıdır. ID değerleri tüm belgede tekil olmak zorunda olduğundan, bu tür taramanın gereksiz bir emek olduğu doğrudur. Zaten bu yüzden yöntem de terk edildi.
Yaklaşımları birleştirmeÜç teknik bir işlev altında toplanabilir. DOM yöntemi (eğer varsa) kullanılır. Eğer hata olursa, tescillli DOM kullanılır, o da çalışmazsa katmanlar kullanılır. Eğer belgenin katman birikimleri arasında da bulunmazsa katmanların içindeki katmanları arar ve tekrar döngüye girer.
function getRefToDiv(divID,oDoc) {
if( document.getElementById ) {
return document.getElementById(divID); }
if( document.all ) {
return document.all[divID]; }
if( !oDoc ) { oDoc = document; }
if( document.layers ) {
if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
//tüm çocuk katmanlarda yineleyerek ara
for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
//başarıda o katmanı döndür aksi halde hiçbir şey döndürme
y = getRefToDiv(divID,oDoc.layers[x].document); }
return y;
}
}
return false;
}
Görünürlüğü Değiştirme
Bir kez yerleştirme öğesine eriştiniz mi, hemen onun stiline erişmek istersiniz. katamansız tarayıcılarda erişimin sonuna '.style' eklemeniz gerekir. Katmanlı tarayıcılarda stiilleri, öğenin doğrudan özellikleri olarak yorumlamak gerekir. Hangisini kullanmak gerektiğini saptamak için stil özelliğinin varlığının denetlenmesi gerekir. Doğru değer şöyle hazırlanır: Bunların hepsinden sonra, yerleştirilmiş bir öğeyi görünebilir yapmak için:
function showDiv(divID_as_a_string) {
//yukarıdaki gibi bir erişim elde et...
myReference = getRefToDiv(divID_as_a_string);
if( !myReference ) {
window.alert('Nothing works in this browser');
return; //daha ileri gitme
}
//now we have a reference to it
if( myReference.style ) {
//DOM & tescilli DOM
myReference.style.visibility = 'visible';
} else {
//katmanlar yazım kuralı
myReference.visibility = 'show';
}
}
showDiv('myDiv');
... ...
<div style="position:absolute;left:0px;top:0px;" id="myDiv">
içerikler
</div>
Denemeyi burada yap gizli öğeyi burada göster. gizli öğeyi göster. Bu yerleştirilmiş öğe saklanmıştı. Onu yine gizle. Tabi ki uyarı mesajında 'bu tarayıcıda hiçbir şey çalışmıyor' yerine onlara daha neşeli bir kodlama önermek gerekirdi. Yerleşmeyi Değiştirme
Eğer doğrudan "doctype" kullanılırsa, bir çok tarayıcı doğru birim (20px, 20 değil) kullanılmasını ister. Bir çok eski tarayıcı bunu anlamaz. Opera 5 gibi (yalnız top), katman tarayıcıları, WebTV vb. Tarayıcının birimleri doğru anladığını belirten hiçbir yöntem yok. Bazı değerleri kabul edebilecektir ama desteklemeyebilir. Bu nedenle DOM destekleme açısından document.childNodes temel bir gereksinimdir. DOM stillerinde birimlerin kullanılması istenir ve bu nedenle DOM anlayabilen tarayıcılar birimleri de anlayabilir. Bu örnekte 'left' ve 'top' başlangıçta ikiside 10px olarak atanmıştır (satıriçi stil niteliğiyle). Kodlama önce '.style' erişiminin kullanılabilirliğine bakar ve eğer öyleyse stil nesnesini değiştirebilir. Sonra o anki değerleri alır, üzerine yenilerini ekler ve bunu yeni değer olarak atar. O anki değeri alırsa, parseInt kullanarak sayı elde eder. Çünkü değerin içinde birim de bulunabilir.
<div style="position:absolute;left:10px;top:10px;" ...
... ...
var noPx = document.childNodes ? 'px' : 0;
if( myReference.style ) { myReference = myReference.style; }
myReference.left = ( parseInt(myReference.left) + 10 ) + noPx;
myReference.top = ( parseInt(myReference.top) + 20 ) + noPx;
'div' 10 px aşağıya ve 20 px sağa kaydırılır. Şu andali koordinatları top: 30px; left: 20px; olur.
Burada dene: Bu öğeyi taşı. Bu zaman sayacıyla birlikte kullanılırsa, her birkaç milisaniyede bir yerleştirilmiş bir öğeyi kayma aralığıyla orantılı yeniden yerleştirebilir. Böylece ekranda durmuş gibi görünür (position: fixed; hala IE tarafından pek desteklenmemektedir). Art alan rengini değiştir
Yazı rengini değiştirmek de istenebilir. Ama katman tarayıcıları bunu yapamaz. Art alan rengini değiştirmenin üç yolu vardır. Katman tarayıcıları bgColor kullanır. DOM ve tescilli DOM tarayıcıları background ve backgroundColor kullanır. Opera 5.x yalnız artalan stilini değiştirebilir, diğerleri (Opera 6+ dahil) her ikisini de değiştirir. 'myReference' yukarıdaki gibi elde edilir. Not: Opera 5'in bazı sürümleri eğer açıkça belirtilmişse ve kalıtımsal değilse, yalnız art alan rengini değiştirir. Eğer bgColor denemesi yaparsanız, Opera 7-7 'Warning' mesajını döndürür. Eğer hangisi diye deneme yapıyorsanız bunu en son kullanın.
if( myReference.style ) { myReference = myReference.style; }
if( myReference.background ) {
//tarayıcıların çoğunda desteklenir
//Gecko tarayıcısı gibi olanlar ve IE serisi
myReference.background = '#00ff00';
} else if( myReference.backgroundColor ) {
//çoğu tarayıcılar destekler
myReference.backgroundColor = '#00ff00';
} else if( myReference.bgColor ) {
//katman tarayıcıları kullanır
myReference.bgColor = '#00ff00';
} else {
//HATA, art alan rengi değiştirme olanağı yoktur.
}
Yanlış olanı atamak sorun çıkartmadığına göre aşağıdaki gibi kısaltma yapılabilir:
if( myReference.style ) { myReference = myReference.style; }
myReference.bgColor = '#00ff00';
myReference.background = '#00ff00';
myReference.backgroundColor = '#00ff00';
Burada deneyin: change the background colour of this element. z-index değiştirmek
if( myReference.style ) { myReference = myReference.style; }
myReference.zIndex = 100;
Burada deneyin: öğenin üzerindeki bağı tıklayın ki onun z-index değeri diğerinin üstüne çıksın.
Küpür Kesme (clipping) değiştirmek
Bu teknik çoğunlukla mesaj kaydırmada kullanılır. Küpür kesme desteklemeyen tarayıcılarda aynısını iframe ile sağlama olanağı vardır. Böylece onun içinde kaydırma yapılabilir. Küpür kesme bu öğede yapılabilir mi diye denemek isteyeceksinizdir (bunu yapmaya hiç gerek yok, çünkü tarayıcılar anlamazlarsa dikkate almadan atlarlar). Bunu anlamak da hiç kolay değildir. Opera 6- gibi tarayıcılarda 'clip style' sorulduğunda 'rect()' der ama onu hiç kullanamaz. Bunu geçmenin bir yolu da yoktur. Yapılabilecek en iyi şey myReference.innerHTML ve myReference.clip destekleniyor mu onu bulmaktır. Bir tarayıcı innerHTML destekliyor ama kesmeyi desteklemiyorsa bunun sorun olması diye bir şey olmaz. Ama 'clip' stili arandığında 'rect()' yanıtı alısa bile küpür kesmeyi desteklemez. Escape stil nesnelerini destekler ama style.clip yazım kuralını desteklemez.
if( myReference.clip ) {
myReference.clip.left = 0;
myReference.clip.top = 0;
myReference.clip.right = 10;
myReference.clip.bottom = 10;
} else if( myReference.style ) {
//sıralama şöyledir: top right bottom left
myReference.style.clip = 'rect(0px,10px,10px,0px)';
} else {
//HATA, hiçbir şey çalışmıyor
}
Burada denetin: Aşağıdaki yerleştirilmiş öğe için küpür kesme dikdörgeni seçin. Art alan kaydırılacak yazının nereye gizlendiğini gösterecektir.
Yerleştirilmiş öğenin birinci satırı. Tarayıcınız küpür kesmeyi desteklemiyor. Artalan Artalan Artalan Boyut değiştir
Bazı tarayıcılar bazı öğeleri içeriğinden daha çok küçültmez. Bazıları içeriği yeni boyutlara göre keser. Bazıları öğenin boyutlarını küçültür ama içeriği olduğu gibi bırakır (görüntülenmiş olarak). Öğe yerleşiminde olduğu gibi, bazı eski tarayıcılar boyuttan sonra ölçü birimi (px) yazılmasını istemez, ama yeni tarayıcılar 'doctypes' için zorunlu tutar. Yine küçük bir denetim, iyi ile az iyi tarayıcıları belirler. Bunlar aşağıda tanımlamıştır:
if( myReference.style ) { myReference = myReference.style; }
if( myReference.resizeTo ) {
myReference.resizeTo( newWidth, newHeight );
}
var noPx = document.childNodes ? 'px' : 0;
myReference.width = newWidth + noPx;
myReference.pixelWidth = newWidth;
myReference.height = newHeight + noPx;
myReference.pixelHeight = newHeight;
Burada deneyin: öğe için yeni boyut belirle: Dene İçeriği yine yazmak
if( typeof( myReference.innerHTML ) != 'undefined' ) {
//tüm tarayıcılarla kullanılır
myReference.innerHTML = 'bazı yeni içerik';
} else if( myReference.document && myReference.document != window.document ) {
//katmanlı tarayıcılarla kullanılır
myReference.document.open();
myReference.document.write('bazı yeni içerik');
myReference.document.close();
}
'iframe' tanımlayarak Opera 5 ve Opera 6 destekleyecek biçimde yetenekleri genişletmek olanağı vardır (bu 'name' niteliğinde olmalıdır). Yüklendiği denenmeli sonra içeriğinin yine yazılması sağlanmalıdır:
if( typeof( myReference.innerHTML ) != 'undefined' ) {
//şu andaki tüm tarayıcılarla kullanılır.
myReference.innerHTML = 'some new content';
} else
if( myReference.document && myReference.document != window.document ) {
//katmanlı tarayıcılarda kullanılır
myReference.document.open();
myReference.document.write('some new content');
myReference.document.close();
} else
if( window.frames && window.frames.length && window.frames['nameOfIframe'] ) {
//Opera 6- gibi tarayıcılarda kullanılır.
myReference = window.frames['nameOfIframe'].window;
myReference.document.open();
myReference.document.write('some new content');
myReference.document.close();
}
Burada deneyin: aşağıdaki yerleştirilmiş öğenin içeriğinin yine yazılması (Opera 5-6 çözümü eklenmemiştir). Bu yerleştirilmiş öğedir. İçerik daha yine yazılmış değildir. Yeni yerleştirilmiş öğeleri yaratma
Bir çok tarayıcı bir öğenin innerHTML özelliğinin değiştirilmesine olanak verir (IE serisi aynı zamanda insertAdjacentHTML işlemini sunar ama diğer DOM tarayıcıların çoğu bunu işlemler arasına eklememiştir). Katmanlı tarayıcılar (Omniweb 4.2- hriç) yeni boş katman yaratan bir yapı sağlarlar. Bu yeni katmanın içine yazılabilir. Bunu kullanmadan önce geçerliliği denenmelidir. OmniWeb 4.2- katman yapılarını sunsa da, bunu kullanmak hataya neden olur. Bu nedenle document.classes ile OmniWeb 4.2- ayrılmış ve korunmuş olur. Katman yazım kurallarıyla, yeni katman sayısal diziniyle katmanlar birikimine eklenmiş olur. Ama adlar birikimine eklenmez. Eğer istersek biz kendimiz onu o listeye (birikime) ekleriz. Biz bu katman için adıyla eninin büyüklüğünü tanımlamalıyız. Her katmanlı tarayıcıda başka türü görüntülenir. Gizlidir. Onun görünür olmasını sağlamalıyız. innerHTML yazım kuralıyla herhangi bir yeni içeriği yaratabiliriz. Tarayıcılar arası olması için yerleştirilmiş öğe olması gerekir. Opera 7-7.1 innerHTML okunurken üst düzey öğenin tüm var olan biçimleri hatalı ayıklar, tuhaf bir etki yaratmış olur. Bu sorunu gidermek için insertAdjacentHTML kullanın (eğer tarayıcı destekliyorsa). Aşağıdaki ilk örnekte, yerleştirilmiş öğe document (belgenin) çocuğu olarak yaratılır.
if( document.layers && window.Layer && document.classes ) {
//350px eninde bir katman yarat
document.layers['newName'] = new Layer( 350 );
//içeriğini yaz
document.layers['newName'].document.open();
document.layers['newName'].document.write('yeni içerik');
document.layers['newName'].document.close();
//stil ver
document.layers['newName'].left = 0;
document.layers['newName'].top = 0;
document.layers['newName'].visibility = 'show';
} else if( document.body ) {
var theString = '
Aşağıdaki örnek yerleştirilmiş bir öğenin çocuğu olarak yeni yerleştirilmiş öğe yaratır (myReference yukarıdaki gibi elde edilmiştir):
if( document.layers && window.Layer && document.classes ) {
//350px eninde katman yarat
document.layers['newName'] = new Layer( 350, myReference );
//içeriğini yaz
document.layers['newName'].document.open();
document.layers['newName'].document.write('yeni içerik');
document.layers['newName'].document.close();
//stille
document.layers['newName'].left = 0;
document.layers['newName'].top = 0;
document.layers['newName'].visibility = 'show';
} else {
var theString = '
Burada deneyin: yeni bir öğe yarat (yeni öğe renk açısından biraz daha farklıdır ve birbirlerinden azıcık kaymıştır (ne olduğu daha kolay belli olsun diye).
Burada deneyin: yeni öğe yaratın (yeni öğeler renkleri açısından farklı olacaktır ve azıcık birbirlerinden kaymış olarak görüntülenir (ne olduğu kolay belli olsun diye). Bu yerleşirilmiş öğenin ilk içeriğidir. Bu değişmez.
Yanlış olanı atamak hata oluşturmaz (var olduğu sürece), o halde hepsi birden aynı anda kullanılır.
if( document.documentElement && document.documentElement.style ) {
document.documentElement.style.backgroundColor = 'red'; }
if( document.body && document.body.style ) {
document.body.style.backgroundColor = 'red'; }
document.bgColor = 'red';
Burada deneyin: Bu belgenin art alan rengini:
Bir öğenin görüntülenme stilini değiştirme
Bu nedenle display stilini sayfa tümüyle yüklendikten sonra kodlamayla değiştirilmelidir. Bunu anlamayan tarayıcılar yapılmak isteneni dikkate almayacaktır ve kullanıcının içeriği görüntülemesine izin verecektir. Display stili görünebilirlik (visibility) stilinden çok farklıdır. Görünebilirliği 'hidden' yapmak, o öğenin görünmesini engellemektir ama sayfadaki yeri boş kalır. Display stilini 'none' yapmak onu görüntüden kaldırır ve boşluğu dolduracak biçimde sayfayı yeniden düzenler. Bu menü sistemleri için çok kullanışlı bir özelliktir. Çok küçük bir programlamayla tarayıcı sayfanın yeniden güzel görünmesini sağlamış olur. Öğelerin kendi display stilleri olmasına izin veren tarayıcıların hepsi document.getElementById ya da document.all kullanırlar (document.layer değil). Bu da işi biraz kolaylaştırmış olur. Tabi ki kullanıcıya kodlamanın onun tarayıcısında çalışmayacağını söylenebilir. Bunun için önce display stil değiştirme olanağımız olup olmadığına bakılmalıdır. O zaman varsayılan değer: 'span' gibi öğeler için 'inline', paragraf ve 'div' gibi öğeler için block olur. HTMLBu örnekte paragraf içinde span vardır.Bu bir paragraftır. Bu da bir paragraf içinde span'dır ve display stili, satıriçi stil tanımıyla 'inline' olarak belirtilmiştir. Bu da aynı paragrafta bir başka satırdır. Ama span içinde değildir. JavaScript
function changeDisplay( elementId, setTo ) {
var theElement;
if( document.getElementById ) {
//DOM
theElement = document.getElementById( elementId );
} else if( document.all ) {
//tescilli DOM
theElement = document.all[ elementId ];
}
if( !theElement ) {
/* Yüklenmemiş sayfa, ya da tarayıcı
document.getElementById ya da document.all desteklediğini
söylese bile, gerçekte kullanılamamaktadır */
return;
}
//stile erişimi sağla
if( theElement.style ) { theElement = theElement.style; }
if( typeof( theElement.display ) == 'undefined' ) {
//Tarayıcı display stilini değiştirmemize izin vermez
//Anlamlı bir mesaj ver
window.alert( 'Tarayıcınız bunu desteklemiyor');
return;
}
//display stilini değiştir
theElement.display = setTo;
}
Burada dene: aşağıdaki paragrafta span için görüntü stili seçme Bu paragrafta, paragraf içinde tanımlanmış span vardır ve display stili 'inline' değerine atanmıştır. Bu da başka bir paragraftır ama span içinde değildir. |