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);

亲自试一试