Style visibility 屬性

定義和用法

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"

屬性值

值 描述
visible 該元素是可見的。默認。
hidden 元素不可見，但仍然影響布局。
collapse 在表格行或單元格上使用時，元素不可見（與 "hidden" 相同）。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： visible
返回值： 字符串，表示元素的內容是否顯示。
CSS 版本： CSS2

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

更多實例

例子 2

display 屬性與 visibility 屬性的區別：

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

親自試一試

例子 3

在隱藏和顯示元素之間切換：

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

親自試一試

例子 4

隱藏并顯示 <img> 元素：

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

親自試一試

例子 5

返回 <p> 元素的可見性類型：

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

親自試一試