Style visibility 属性

定义和用法

visibility 属性设置或返回元素是否应该可见。

visibility 属性允许作者显示或隐藏元素。

该属性类似于 display 属性。但不同的是,如果设置 display:none,它会隐藏整个元素,而 visibility:hidden 意味着元素的内容将不可见,但元素会保持其原始位置和大小。

另请参阅:

CSS 教程:CSS Display 和 visibility

CSS 参考手册:visibility 属性

实例

例子 1

隐藏 <p> 元素的内容:

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

Cuba sendiri

页面下方提供更多实例。

语法

返回 visibility 属性:

object.style.visibility

设置 visibility 属性:

object.style.visibility = "visible|hidden|collapse|initial|inherit"

Nilai properti

Nilai Deskripsi
visible Elemen ini dapat dilihat. Lalai.
hidden Elemen takbolehlihati, tetapi masih mempengaruhi bentuk.
collapse Saat digunakan di baris tabel atau sel, elemen takbolehlihati (sama seperti "hidden").
initial Tetapkan properti ini ke nilai lalainya. Lihat initial.
inherit Warisi properti ini dari elemen bapanya. Lihat inherit.

Rangkaian teknikal

Nilai lalai: visible
Kembalian nilai: String yang menyatakan apakah konten elemen ditunjukkan.
Versi CSS: CSS2

Dukungan pelayar

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dipendukir Dipendukir Dipendukir Dipendukir Dipendukir

Lebih banyak contoh

Contoh 2

Perbezaan antara properti display dan visibility:

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

Cuba sendiri

Contoh 3

Beralih antara menyembunyikan dan menunjukkan elemen:

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

Cuba sendiri

Contoh 4

Sembunyikan dan tunjukkan elemen <img>:

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

Cuba sendiri

Contoh 5

Kembalikan jenis kebolehlihatan elemen <p>:

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

Cuba sendiri