PHP | Jquery | Css | Codeigniter | Unity3D


CSS kullanırken sayfadaki elementleri gizlemek ya da kaldırmak için iki özelliği mevcuttur. Bunlardan biri display:none;, diğeri ise visibility:hidden; diyebiliriz ancak bunları nerede kullanacağımızı iyi bilmemiz gerekir ya da bunların arasındaki fark nedir ? Normalde bir h1 türünde başlığımız olduğunu düşünelim. Bu element normalde sayfada belli bir yere sahiptir. Diyelim ki biz bu elementi gizlemek istiyoruz, ilk olarak display ile gizleyelim

Css display ve Visibility kullanımı Display ile gizleme yapıldığında elemetin yeri boşalır yani sayfadaki gizlediğimiz elementler tıpkı h1 hiç olmamış, yokmuş gibi davranır ve normal sıramada dizilirler. Şimdi de aynı elementi visibility kullanarak gizleyelim. Gördüğünüz üzre h1 elementi yine gizlendi ancak displaydan farklı olarak gizlenen elementin yeri boş kaldı ve sadece görünürlüğü kayboldu, tıpkı alpha değerini sıfırlamışçasına davrandı. Bir elementin alpha değerini sıfırlarsanız da tıpkı visibilty hidden yapmışsınız gibi davranır yani elementin yeri, konumu korunur.

Gelelim bu kullanımdan bir üçüncüsü olan jquery(javascript) .remove() koduna, jquery ile de elementleri gizleyebilirsiniz ancak jquery remove ile bir elementi gizlemeniz css display ve visibility den biraz farklıdır. Bunun farkını şöyle açıklayabiliriz; Diyelim ki sayfanızda 3 tane p elementi var ve bunlardan ilkini display ile gizlediniz, ikinciyi visibility ile, üçüncüyü ise jquery remove ile gizlediniz(kaldırdınız). Şimdi biz sayfamızda kaç tane p elementi var öğrenmek istiyoruz ? Yani p elementlerinin sayısı nedir ? Bunu verdiğim linkteki jquery legth metoduyla öğrenebiliriz. Bu durumda , yani p elementlerinin sayısını bulan jquery kodunu yazdığımızda bize toplam sayıyı 3 vericektir. Çünkü CSS display:none ve visibility:hidden sayfadan elementi kaldırmazken jquery remove elementin sadece görünürlüğünü değil varlığını da ortadan kaldırır !

Örneği inceleyebilirsiniz .



Soru ve Tartışma Konularınız için;

Yayınlayan
comments powered by Disqus
Yazar: Windofelm
Description: Css display ve visibility özelliklerinin farkı nedir buna bakalım. Normalde ikisi de gizleme işlemi yapar ancak birbirinden farklıdır.