轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

Style visibility 属性

实例

隐藏元素的内容:

document.getElementById("myP").style.visibility = "hidden";
亲自试一试 »

定义和用法

visibility 属性设置元素是否应该是可见的。

visibility 属性允许作者显示或隐藏一个元素。与 display 属性类似。 然而，不同的是，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden ，元素的内容将不可见，但元素仍保持原来的位置和大小。

浏览器支持

属性
visibility Yes Yes Yes Yes Yes

语法

返回 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";
}
亲自试一试 »

实例

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

alert(document.getElementById("myP").style.visibility);
亲自试一试 »

相关页面

CSS 教程: CSS Display and visibility

CSS 参考手册: visibility 属性

❮ Style 对象