Sets or retrieves whether the content of the object is displayed.
Syntax
| HTML |
{ visibility : sVisibility }
|
|---|
| Scripting | [ sVisibility = ] object.style.visibility |
|---|
Possible Values
| sVisibility | String that
specifies or receives one of the following values.inheritDefault. Object inherits the visibility of the next parent object. visibleObject is visible.
hiddenObject is hidden.
collapse .gif)
Note This documentation is preliminary and is subject to change.
Internet Explorer 8. Used in tables to remove rows and columns; for all other elements, same as hidden. |
The property is read/write
for all objects except the following, for which it is read-only:
currentStyle.
The property has a default value of
inherit. The Cascading Style Sheets (CSS) attribute is
not inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.
Remarks
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. You can change the visibility through scripting to show and hide overlapping content based on user interaction. For document style scripting information, see Introduction to Dynamic Styles.
As of Microsoft Internet Explorer 5, a child object can be visible when its parent is hidden. With Internet Explorer 4.0, the parent object must be visible for a child object to be visible.
Examples
The following examples use the
visibility attribute and the
visibility property to determine whether the object is visible.
This example uses two calls to an embedded (global) style sheet to hide and then show the image when the user moves the mouse over and off the text.
<head>
<style>
.vis1 {
visibility: visible;
}
.vis2 {
visibility: hidden;
}
</style>
</head>
<body>
<img id="oSphere" src="sphere.jpg" alt="sphere">
<p onmouseover="oSphere.className='vis2'"
onmouseout="oSphere.className='vis1'">
Mouseover this text to make the sphere disappear.</p>
</body>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
.gif)
This example uses a call to a function to hide the image.
<head>
<script type="text/javascript">
function disappear()
{
oSphere.style.visibility="hidden";
}
function reappear()
{
oSphere.style.visibility="visible";
}
</script>
</head>
<body>
<img src="sphere.jpeg" id="oSphere">
<p id="oTxt" onmouseover="disappear()" onmouseout="reappear()">Move the mouse
over this text to make the sphere disappear.</p>
</body>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
This property is defined in
Cascading Style Sheets (CSS), Level 2 (CSS2) .gif)
.
Applies To
|
A,
ADDRESS,
APPLET,
B,
BIG,
BLOCKQUOTE,
BODY,
BUTTON,
CAPTION,
CENTER,
CITE,
CODE,
COL,
COLGROUP,
currentStyle,
CUSTOM,
DD,
defaults,
DFN,
DIR,
DIV,
DL,
DT,
EM,
EMBED,
FIELDSET,
FORM,
hn,
HR,
HTML,
I,
IFRAME,
IMG,
INPUT type=button,
INPUT type=checkbox,
INPUT type=file,
INPUT type=image,
INPUT type=password,
INPUT type=radio,
INPUT type=reset,
INPUT type=submit,
INPUT type=text,
ISINDEX,
KBD,
LABEL,
LEGEND,
LI,
LISTING,
MARQUEE,
MENU,
NOBR,
OBJECT,
OL,
P,
PRE,
runtimeStyle,
S,
SAMP,
SELECT,
SMALL,
SPAN,
STRIKE,
STRONG,
style,
SUB,
SUP,
TABLE,
TBODY,
TD,
TEXTAREA,
TFOOT,
TH,
THEAD,
TR,
TT,
U,
UL,
VAR,
XMP,
CSSCurrentStyleDeclaration Constructor,
CSSRuleStyleDeclaration Constructor,
CSSStyleDeclaration Constructor |