Stil görünürlüğü Özellik
Örnek
Bir <p> öğesinin içeriğini gizleyin:
document.getElementById("myP").style.visibility = "hidden";
Tanım ve Kullanım
Görünürlük özelliği, bir öğenin görünür olup olmayacağını ayarlar veya döndürür.
Görünürlük özelliği, yazarın bir öğeyi göstermesine veya gizlemesine izin verir. Display özelliğine benzer . Ancak fark şudur ki, ayarlarsanız display:nonetüm öğeyi gizler ve öğenin visibility:hiddeniçeriğinin görünmez olacağı, ancak öğenin orijinal konumunda ve boyutunda kalacağı anlamına gelir.
Tarayıcı Desteği
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
Görünürlük özelliğini döndürün:
object.style.visibility
Görünürlük özelliğini ayarlayın:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Mülk değerleri
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Teknik detaylar
| Varsayılan değer: | görünür |
|---|---|
| Geri dönüş değeri: | Bir öğenin içeriğinin gösterilip gösterilmediğini temsil eden bir Dize |
| CSS Sürümü | CSS2 |
Daha fazla örnek
Örnek
Display özelliği ile görünürlük özelliği arasındaki fark:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Örnek
Bir öğeyi gizleme ve gösterme arasında geçiş yapın:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Örnek
Bir <img> öğesini gizleyin ve gösterin:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Örnek
Bir <p> öğesinin görünürlük türünü döndürün:
alert(document.getElementById("myP").style.visibility);
İlgili Sayfalar
CSS eğitimi: CSS Görüntüleme ve görünürlük
CSS referansı: görünürlük özelliği
❮ Stil Nesnesi