The CSS reference

"visibility" - css property (v. css 2)

This property may be used in conjunction with scripts to create dynamic effects.

Initial value: visible

The property is inherited

HTML usage: all elements

Browsers that support the visibility - property :

Possible visibility values:

value

Comments

CSS

visible

The generated box is visible.

2

hidden

The generated box is invisible (fully transparent), but still affects layout.

2

collapse

If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'.

2

inherit

Will inherit the value from parent specification.

2

Property "visibility" example:

<!DOCTYPE HTML ><html><head><script type="text/javascript">
function changeVisible(value) {
document.getElementById("p1").style.visibility=value;
}
</script><style type="text/css">
#p1 { width: 300px;
background-color: #DDDDDD;
}
</style></head><body ><h1 >CSS Selectors</h1><p id="p1">One of the primary advantages of
CSSparticularly to designersis its ability to
easily apply a set of styles to all elements
of the same type. Unimpressed? Consider this:
by editing a single line of CSS, you can change
the colors of all your headings.</p><div><input type="button" onclick="changeVisible('hidden')"
value="Paragraph to visibility: hidden" /><br/><input type="button" onclick="changeVisible('collapse')"
value="Paragraph to visibility: collapse" /><br/><input type="button" onclick="changeVisible('inherit')"
value="Paragraph to visibility: inherit" /><br/></div></body></html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.visibility="visibility value"// To GET values you must first get the computed style object// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.visibility;