EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

visibility property

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

Internet Explorer 9

Syntax

visibility: visible | hidden | collapse | inherit

Property values

inherit

Default. Object inherits the visibility of the next parent object.

visible

Object is visible.

hidden

Object is hidden.

collapse

Internet Explorer 8. Used in tables to remove tr and col; for all other elements, same as hidden.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valueinherit

Remarks

Unlike display, 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 Microsoft 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 an object is visible.

The first example uses CSS classes defined in an embedded (global) style sheet to hide and then show the image when the user moves the mouse over and off the text.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_h.htm


<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 set visibility to hidden on the image of the sphere.</p>
</body>

The second example uses JavaScript functions to hide and then show the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_s.htm


<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()">Mouseover this text to set visibility to hidden on the image of the sphere.</p>
</body>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

표시:
© 2014 Microsoft. All rights reserved.