December 16, 2000 - Checking Element Visibility | WebReference

December 16, 2000 - Checking Element Visibility

Yehuda Shiran December 16, 2000
Checking Element Visibility
Tips: December 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The browser-independent W3C Standard's way to set and get an element's visibility is via the style object's visibility property. The visibility property may have three possible values:

"")
  • "hidden"
  • "visible"

    An element is visible when its style object's visibility property is either empty ("") or "visible". It is invisible when the property is "hidden".

    When you initially place an element, its default visibility is an empty string (""). The following code segment renders two buttons and their onclick event handler:

    <FORM>
<INPUT ID="button1" STYLE="position:relative; left:0;" TYPE="button" VALUE="Show Visibility of Other Button" onclick="handleClick()">
<INPUT ID="button2" STYLE="position:relative; left:150;" TYPE="button" VALUE="Show My Visibility" onclick="handleClick()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick() {
  alert('visibility = "' + document.getElementById('button2').style.visibility + '"');
}
// -->
</SCRIPT>

    Click the left button to find out the visibility value of the right button. It should show an empty string::

    Now you know how to test if an element is visible or hidden. There are two ways:

    if (visibility == "")...

    or

    if (visibility != "hidden")...

    This script does not work on Mac IE4.5.