CSS Attributes Index Positioning Properties
Sets or retrieves whether the content of the object is displayed.
| CSS |
{ visibility: 'inherit' | 'visible' | 'hidden' } |
| Script |
object.style.visibility = sVisibility ] |
| inherit |
Object inherits the visibility of the next parent object. |
| visible |
The object is visible. |
| hidden |
The object is hidden. |
The property is read/write with a default value of inherit; the CSS attribute is not inherited, unless the value is set to inherit.
Unlike display: none, objects that are not visible still reserve the same physical space in the content layout as they would if they were visible. Changing the visibility through scripting is useful for showing and hiding overlapping content based on user interaction. Note that for a child object to be visible, the parent object must also be visible. See Dynamic Styles for document style scripting information.
The following examples demonstrate use of inline event handlers to dynamically set whether the content of an element is visible. Both methods yield the same effect.
The sample below defines visibility style attributes in an embedded stylesheet, and invokes calls to the stylesheet to hide or show an element in response to mouse events.
<style type="text/css">
.vis { visibility: visible }
.hid { visibility: hidden }
</style>
...
<p onmouseover="theImg.className='hid'" onmouseout="theImg.className='vis'"> ... </p>
<img id="theImg" src="imgs/sample.jpg">
Show me
The sample below uses inline event handlers to dynamically set an object’s visibility property in response to mouse events.
<script language="JavaScript">
function disappear ( ) {
theImg.style.visibility = "hidden";
}
function reappear ( ) {
theImg.style.visibility = "visible";
}
</script>
<body onclick="reappear ( )" ondblclick="disappear ( )">
...
<img style="visibility:hidden" src="sample.jpg">
Show me
display, Showing and hiding objects in different browsers