JavaScript HTML DOM Style visibility 属性

• 

  visibility 属性

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

  隐藏p元素的内容：

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

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  visibility	支持	支持	支持	支持	支持

• 

  语法

  返回visibility属性：

  object.style.visibility

  设置visibility属性：

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

  属性值

  值	描述
  visible	元素是可见的。 这是默认值
  hidden	元素不可见，但仍会影响布局
  collapse	在表格行或单元格上使用时，该元素不可见（与“隐藏”相同）
  initial	设置这个属性为默认值。 阅读有关initial信息
  inherit	从其父元素继承此属性。 阅读有关inherit的信息

• 

  技术细节

  项目	描述
  默认值：	visible
  返回值：	一个字符串，表示是否显示元素的内容
  CSS版本	CSS2

• 

  更多例子

  显示属性和可见性属性之间的差异：

  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参考：CSS visibility 属性