Style visibility 属性
定义和用法
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";
}
亲自试一试 »
相关页面
CSS 教程: CSS Display and visibility
CSS 参考手册: visibility 属性
❮ Style 对象