Properti visibility Style

Definisi dan Penggunaan

visibility Properti ini mengatur atau mengembalikan apakah elemen harus terlihat atau tidak.

visibility Properti ini memungkinkan penulis untuk menampilkan atau menyembunyikan elemen.

Properti ini mirip dengan Properti display. tapi yang berbeda, jika diatur display:none, yang akan menyembunyikan elemen seluruhnya, dan visibility:hidden Maksudnya adalah konten elemen akan tak terlihat, tetapi elemen akan tetap mempertahankan posisi dan ukurannya.

Lihat pula:

Panduan CSS:CSS Display dan visibility

Panduan Referensi CSS:Properti visibility

Contoh

Contoh 1

Sembunyikan konten elemen <p>:

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

Coba Sendiri

Lebih banyak contoh disediakan di bawah halaman.

Sintaks

Kembalikan properti visibility:

object.style.visibility

Pengaturan properti visibility:

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

Nilai properti

Nilai Deskripsi
visible Elemen ini dapat dilihat. Baku.
hidden Elemen tidak dapat dilihat, tetapi masih mempengaruhi tata letak.
collapse Ketika digunakan di baris tabel atau sel, elemen tidak dapat dilihat (sama seperti "hidden").
initial Atur properti ini ke nilai baku. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai baku: visible
Nilai kembalian: String yang menunjukkan apakah elemen ditampilkan atau tidak.
Versi CSS: CSS2

Dukungan perpustakaan

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Beberapa contoh lain

Contoh 2

Perbedaan antara properti display dan visibility:

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

Coba Sendiri

Contoh 3

Beralih antara menyembunyikan dan menampilkan elemen:

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

Coba Sendiri

Contoh 4

Sembunyikan dan tampilkan elemen <img>:

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

Coba Sendiri

Contoh 5

Kembalikan tipe kenampakan elemen <p>:

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

Coba Sendiri