Style visibility 屬性
描述
visibility 屬性設定或返回元素是否可見。
visibility 屬性允許作者顯示或隱藏元素。它類似於 display 屬性。但是，不同之處在於，如果您設定 display:none，它會隱藏整個元素，而 visibility:hidden 意味著元素的內容將不可見，但元素仍保持其原始位置和大小。
瀏覽器支援
| 屬性 | |||||
|---|---|---|---|---|---|
| 可見性 | 是 | 是 | 是 | 是 | 是 |
語法
返回 visibility 屬性
object.style.visibility
設定 visibility 屬性
object.style.visibility = "visible|hidden|collapse|initial|inherit"
屬性值
| 值 | 描述 |
|---|---|
| visible | 元素可見。這是預設值。 |
| hidden | 元素不可見，但仍影響佈局。 |
| collapse | 在表格行或單元格上使用時，元素不可見（與 "hidden" 相同）。 |
| initial | 將此屬性設定為其預設值。閱讀關於 initial |
| inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
| 預設值 | visible |
|---|---|
| 返回值 | 一個字串，表示元素內容是否顯示。 |
| CSS 版本 | CSS2 |
更多示例
示例
display 屬性和 visibility 屬性之間的區別
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
自己動手試一試 »
示例
切換元素的隱藏和顯示
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
自己動手試一試 »
示例
隱藏和顯示 <img> 元素
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
自己動手試一試 »
相關頁面
CSS 教程：CSS Display 和 visibility
CSS 參考：visibility 屬性
