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