Style visibilityProperty
Style Object
Definition and Usage
The visibility property sets whether an element should be visible.
The visibility property allows the author to show or hide an element. Similar to the display property. However, the difference is that if you set display:none, the entire element is hidden, whereas if you set visibility:hidden, the content of the element will be invisible, but the element still retains its original position and size.
Syntax
Set the visibility property:
Object.style.visibility="visible|hidden|collapse|inherit"
Return the visibility property:
Object.style.visibility
| Value | Description |
|---|---|
| visible | Default. The element is visible. |
| hidden | The element is invisible, but still affects layout. |
| collapse | When used in a table row or cell, the element is invisible (same as "hidden"). |
| inherit | The value of the visibility property is inherited from the parent element. |
Browser Support
All major browsers support the visibility property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Hide the content of an element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.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">This is some text.</p>
<p id="p2">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Hide text with display property">
<input type="button" onclick="demoVisibility()" value="Hidden text with visibility property">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.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">This is some text.</p>
<p id="p2">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Hide text with display property">
<input type="button" onclick="demoVisibility()" value="Hidden text with visibility property">
</body>
</html>
Try it Yourself »
Style Object Other Extensions