myNotlar Logo

visibility


Internet Explorer Firefox Opera

visibility özelliği, elementin görünür olup-olmadığını belirler. Bu görünmezliği, elementin kendisini görünmez yaparken, sayfa/doküman üzerinde kapladığı alanı boş alan olarak göstererek gerçekleştirir. Sadece tr elementine visibility özelliğinin collapse değeri uygulandığında, varsa diğer satırlar birleştirilerek kapladığı alanda görünmez olur.

DOM Sözdizimi

element.style.visibility = "gorunum"

CSS Sözdizimi

visibility: gorunum
gorunum

Aşağıdaki değerleri alarak nesneyi görünmez yapar.

  • visible : Nesne normal olarak gösterilir.
  • hidden : Nesne görünmez olur. Fakat doküman üzerinde kapladığı alanda değişlik olmaz. Kapladığı alan boş olarak gösterilir.
  • collapse : Firefox ve Opera tarayıcılarında tablo satırı, satır grubu, sütun ve sütun gruplarında kullanılabilen bu değer, bu elementlerin gizlenmesini sağlar. Bu gizleme sırasında Firefox tarayıcısında özellikle görünmez olan satırlar yerine eğer varsa diğer satırlar kaydırılarak boşluk doldurulur. Bu özellik diğer elementlerde kullanıldığın da hidden ile aynı etkiyi yapar.

Aşağıdaki örnek, bir table elementi satırlarının visibility özelliğinin hidden ve collapse değerleri ile gizlenmesini göstermektedir.

<style type="text/css">
#ornekTablo a:hover
{
	text-decoration:none;
	font-weight:bold;
}
#ornekTablo td
{
	width:140px;
}
</style>

<script type="text/javascript">
function collapse(sutun) {
	sutun.parentNode.style.visibility = 'collapse';
}
function hidden(sutun) {
	sutun.parentNode.style.visibility = 'hidden';
}
function goster() {
	var tablo = document.getElementById("ornekTablo");
	
	var satirlar = tablo.getElementsByTagName("tr")
	
	for(i = 0;i < satirlar.length; i++)
		satirlar[i].style.visibility = 'visible';
}
</script>

<input type="button" value="Hepsini Göster" onClick="goster()" />

<table id="ornekTablo" border="1" cellspacing="0" cellpadding="0">
  <tr><td>Örnek satır - 1</td>
    <td>visibility: <a href="#" onClick="hidden(this.parentNode); return false;">hidden</a></td>
    <td>visibility: <a href="#" onClick="collapse(this.parentNode); return false;">collapse</a></td>
  </tr>
  <tr><td>Örnek satır - 2</td>
    <td>visibility: <a href="#" onClick="hidden(this.parentNode); return false;">hidden</a></td>
    <td>visibility: <a href="#" onClick="collapse(this.parentNode); return false;">collapse</a></td>
  </tr>
  <tr><td>Örnek satır - 3</td>
    <td>visibility: <a href="#" onClick="hidden(this.parentNode); return false;">hidden</a></td>
    <td>visibility: <a href="#" onClick="collapse(this.parentNode); return false;">collapse</a></td>
  </tr>
  <tr><td>Örnek satır - 4</td>
    <td>visibility: <a href="#" onClick="hidden(this.parentNode); return false;">hidden</a></td>
    <td>visibility: <a href="#" onClick="collapse(this.parentNode); return false;">collapse</a></td>
  </tr>
  <tr><td>Örnek satır - 5</td>
    <td>visibility: <a href="#" onClick="hidden(this.parentNode); return false;">hidden</a></td>
    <td>visibility: <a href="#" onClick="collapse(this.parentNode); return false;">collapse</a></td>
  </tr>
</table>
Test Edin
Örnek satır - 1 visibility: hidden visibility: collapse
Örnek satır - 2 visibility: hidden visibility: collapse
Örnek satır - 3 visibility: hidden visibility: collapse
Örnek satır - 4 visibility: hidden visibility: collapse
Örnek satır - 5 visibility: hidden visibility: collapse
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |