目录

style visibility 属性

❮上一节 ❮ 样式对象参考下一节❯

示例

隐藏 <p> 元素的内容：

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

亲自试一试 »

描述

可见性属性设置或返回元素是否可见。

可见性属性允许作者显示或隐藏元素。它类似于展示属性。但是，不同之处在于，如果您设置display:none，它隐藏了整个元素，而visibility:hidden意味着元素的内容将不可见，但元素保持其原始位置和大小。

浏览器支持

Property
visibility	Yes	Yes	Yes	Yes	Yes

语法

返回可见性属性：

object.style.visibility

设置可见性属性：

object.style.visibility = "visible|hidden|collapse|initial|inherit"

属性值

Value	Description
visible	The element is visible. This is default
hidden	The element is not visible, but still affects layout
collapse	When used on a table row or cell, the element is not visible (same as "hidden")
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

技术细节

默认值：	可见的
返回值：	String，表示元素内容是否显示
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";
}

亲自试一试 »

示例

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

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

亲自试一试 »

相关页面

CSS教程：CSS 显示和可见性

CSS 参考：可见性属性

❮上一节 ❮ 样式对象参考下一节❯