HTML DOM Style visibility 属性

最后更新于：2022-03-26 22:29:58

Style visibility 属性

HTML DOM Style visibility 属性 Style 对象

定义和用法

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

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

语法

设置 visibility 属性：

Object.style.visibility=”visible|hidden|collapse|inherit”

返回 visibility 属性：

Object.style.visibility

值 描述
visible 默认。元素是可见的。
hidden 元素是不可见的，但仍然影响布局。
collapse 当在表格行或单元格中使用时，该元素是不可见的（与 “hidden” 相同）。
inherit visibility 属性的值从父元素继承。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 visibility 属性。

注意：IE7 及更早的版本不支持 “inherit” 值。IE8 只有规定了 !DOCTYPE 才支持 “inherit”。IE9 支持 “inherit”。

实例

实例

隐藏元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
<script>
function demoDisplay(){
    document.getElementById(“p1″).style.display=”none”;
}
function demoVisibility(){
    document.getElementById(“p2″).style.visibility=”hidden”;
}
</script>
</head>
<body>

<p id=”p1″>这是一些文本。</p>
<p id=”p2″>这是一些文本。</p>
<input type=”button” onclick=”demoDisplay()” value=”隐藏显示属性的文本”>
<input type=”button” onclick=”demoVisibility()” value=”具有可见性属性的隐藏文本”>

</body>
</html>

尝试一下 »

HTML DOM Style visibility 属性 Style 对象