visibility Attribute | visibility Property

Sets or retrieves whether the content of the object is displayed.

Syntax

HTML Scripting

{ visibility : sVisibility }

object.style.visibility [ = sVisibility ]

Possible Values

sVisibility

String that specifies or receives one of the following values.

inherit	Default. Object inherits the visibility of the next parent object.
visible	Object is visible.
hidden	Object is 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.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. 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.

<STYLE>
.vis1 { visibility :visible }
.vis2 { visibility :hidden }
</STYLE>
</HEAD>
<BODY>
<IMG ID="oSphere" SRC="sphere.jpg">
<P onmouseover="oSphere.className='vis2'" onmouseout="oSphere.className='vis1'"> Move the mouse over this text to make the sphere disappear.</P>

This example uses a call to a function to hide the image.

<SCRIPT>
function disappear()
{ oSphere.style. visibility ="hidden"; }
function reappear() { oSphere.style. visibility ="visible"; }
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="sphere.jpeg" ID="oSphere"> Move the mouse over
<SPAN ID="oTxt" onmouseover="disappear()" onmouseout="reappear()"> this text</SPAN> to see the sphere disappear.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) .

Applies To

Platform Version

Win16:	4.0
Win32:	4.0
Windows CE:	4.0
Unix:	4.0
Mac:	4.0

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

Home | Top | Website design | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→