Style visibility 属性
- Halaman sebelumnya verticalAlign
- Halaman berikutnya whiteSpace
- Kembali ke tingkat atas Objek Style HTML DOM
定义和用法
visibility
属性设置或返回元素是否应该可见。
visibility
属性允许作者显示或隐藏元素。
该属性类似于 display 属性。但不同的是,如果设置 display:none
,它会隐藏整个元素,而 visibility:hidden
意味着元素的内容将不可见,但元素会保持其原始位置和大小。
另请参阅:
CSS 教程:CSS Display 和 visibility
CSS 参考手册:visibility 属性
实例
例子 1
隐藏 <p> 元素的内容:
document.getElementById("myP").style.visibility = "hidden";
页面下方提供更多实例。
语法
返回 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"; }
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'; } }
Contoh 4
Sembunyikan dan tunjukkan elemen <img>:
function hideElem() { document.getElementById("myImg").style.visibility = "hidden"; } function showElem() { document.getElementById("myImg").style.visibility = "visible"; }
Contoh 5
Kembalikan jenis kebolehlihatan elemen <p>:
alert(document.getElementById("myP").style.visibility);
- Halaman sebelumnya verticalAlign
- Halaman berikutnya whiteSpace
- Kembali ke tingkat atas Objek Style HTML DOM