CSS可见性visibility cssvisibility|CSS2

本文概述

CSS可见性参数
CSS可见性示例
JavaScript语法

CSS可见性属性用于指定元素是否可见。
注意：不可见元素也会占用页面上的空间。通过使用显示属性, 你可以创建不占用空间的不可见元素。
句法：

visibility: visible|hidden|collapse|initial|inherit;

CSS可见性参数visible：这是默认值。它指定该元素是可见的。
hidden：指定元素不可见（但仍占用空间）。
折叠：仅用于表格元素。它用于删除行或列, 但不影响表布局。
行或列占用的空间可用于其他内容。
如果在其他元素上使用了折叠, 则呈现为“隐藏”
initial：用于将此属性设置为其默认值。
继承：用于从其父元素继承此属性。
CSS可见性示例

< !DOCTYPE html> < html> < head> < style> h1.visible { visibility: visible } h1.hidden { visibility: hidden } < /style> < /head> < body> < h1 class="visible"> I am visible< /h1> < h1 class="hidden"> I am invisible< /h1> < p> < strong> Note:< /strong> An invisible element also take up the space on the page. By using display property you can create invisible elements that don't take space.< /p> < /body> < /html>

JavaScript语法

object.style.visibility="hidden"

【CSS可见性visibility】请参阅JavaScript示例：

< !DOCTYPE html> < html> < head> < style> #myDIV { margin: auto; width: 400px; height: 200px; background-color: lightpink; border: 1px solid black; } < /style> < /head> < body> < p> Click the "Try it" button to set the visibility property and hide the div element.< /p> < button onclick="myFunction()"> Try it< /button> < div id="myDIV"> This is my DIV element.< /div> < p> < strong> Note:< /strong> An invisible element also take up the space on the page. < /p> < script> function myFunction() { document.getElementById("myDIV").style.visibility = "hidden"; } < /script> < /body> < /html>