Style visibility özelliği

Tanım ve Kullanım

visibility özelliği, elementin görünürlüğünü ayarlar veya döndürür.

visibility özellik, yazarın elementi göstermek veya gizlemek için izin verir.

Bu özellik, display özelliğiayrıca, display özelliği ayarlanırsa display:noneolacak, ancak visibility:gizli Bu, elementin içeriğinin görünmez olacağı, ancak elementin orijinal konumunu ve boyutunu koruyacağı anlamına gelir。

Ayrıca bkz：

CSS Eğitimi：CSS Display ve visibility

CSS Referans Kılavuzu：visibility özelliği

Örnek

Örnek 1

<p> elementinin içeriğini gizleyin：

document.getElementById("myP").style.visibility = "gizli";

Kişisel olarak deneyin

Daha fazla örnek, sayfanın altında sunulmaktadır。

Sözdizimi

visibility özelliğini döndürün：

nesne.style.visibility

visibility özelliğini ayarlayın：

nesne.style.visibility = "görünür|gizli|kapanmış|ilk|devralınmış"

Özellik değeri

Değer Açıklama
visible Bu element görünürdür. Varsayılan.
hidden Element görünmez, ancak hala düzeni etkiler.
collapse Tablo satırı veya hücresi üzerinde kullanıldığında, element görünmezdir ("hidden" ile aynıdır).
initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial。
inherit Bu özelliği ebeveyn elementinden miras alır. Bakınız inherit。

Teknik ayrıntılar

Varsayılan değer: visible
Dönüş değeri: Dizgi, elementin içeriklerinin görünürlüğünü ifade eder.
CSS sürümü: CSS2

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Desteklenen Desteklenen Desteklenen Desteklenen Desteklenen

Daha fazla örnek

Örnek 2

display özelliği ile visibility özelliği arasındaki fark:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Kişisel olarak deneyin

Örnek 3

Elementin gizlenmesi ve gösterilmesi arasında geçiş yapma:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Kişisel olarak deneyin

Örnek 4

Görünür ve gizlenmiş <img> elementlerini:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

Kişisel olarak deneyin

Örnek 5

Dönüş <p> elementinin görünürlüğü türünü:

alert(document.getElementById("myP").style.visibility);

Kişisel olarak deneyin