Style visibility property

Definition and Usage

visibility Property sets or returns whether the element should be visible.

visibility Property allows the author to display or hide elements.

This property is similar to Display property. But the difference is that if you set display:none, it will hide the entire element, while visibility:hidden Means that the content of the element will be invisible, but the element will maintain its original position and size.

See also:

CSS Tutorial:CSS Display and visibility

CSS Reference Manual:Visibility property

Example

Example 1

Hide the content of the <p> element:

document.getElementById("myP").style.visibility = "hidden";

Try It Yourself

More examples are provided below the page.

Syntax

Return the visibility property:

object.style.visibility

Set the visibility property:

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";
}

Try It Yourself

例子 3

在隐藏和显示元素之间切换：

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

Try It Yourself

例子 4

隐藏并显示 <img> 元素：

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

Try It Yourself

例子 5

返回 <p> 元素的可见性类型：

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

Try It Yourself