Properti visibilitas gaya
Contoh
Sembunyikan konten elemen <p>:
document.getElementById("myP").style.visibility = "hidden";
Definisi dan Penggunaan
Properti visibilitas menetapkan atau mengembalikan apakah suatu elemen harus terlihat.
Properti visibilitas memungkinkan penulis untuk menampilkan atau menyembunyikan elemen. Ini mirip dengan properti tampilan . Namun, perbedaannya adalah jika Anda mengatur display:none, itu menyembunyikan seluruh elemen, sementara visibility:hiddenitu berarti bahwa isi elemen tidak akan terlihat, tetapi elemen tetap pada posisi dan ukuran aslinya.
Dukungan Peramban
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Kembalikan properti visibilitas:
object.style.visibility
Setel properti visibilitas:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Nilai properti
| 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 |
Detail Teknis
| Nilai Bawaan: | terlihat |
|---|---|
| Nilai Kembali: | Sebuah String, mewakili apakah konten suatu elemen ditampilkan atau tidak |
| Versi CSS | CSS2 |
Lebih Banyak Contoh
Contoh
Perbedaan antara properti tampilan dan properti visibilitas:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Contoh
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';
}
}
Contoh
Sembunyikan dan tampilkan elemen <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Contoh
Kembalikan tipe visibilitas elemen <p>:
alert(document.getElementById("myP").style.visibility);
Halaman Terkait
Tutorial CSS: Tampilan dan visibilitas CSS
Referensi CSS: properti visibilitas
Objek Gaya