Style visibility 属性
描述
visibility 属性设置或返回元素是否可见。
visibility 属性允许作者显示或隐藏元素。它类似于 display 属性。但是，不同之处在于，如果您设置 display:none，它会隐藏整个元素，而 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 |
更多示例
示例
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";
}
自己动手试一试 »
相关页面
CSS 教程：CSS Display 和 visibility
CSS 参考：visibility 属性
