JavaScript Animations, Part I: Setting the Element's Visibility - Doc JavaScript
Setting the Element's Visibility
Using the CSS visibility
property, you can make any element or group of elements invisible. This enables your application to selectively display different parts of a document over time when used in combination with the DOM (Document Object Model) exposed to JavaScript.
In both fourth-generation browsers, the visibility
property in a style definition can be assigned one of three values: visible
, hidden
, or inherit
. The
inherit
value simply instructs the browser to show the element of its parent element if it is visible, and to hide it if its parent is hidden. In most cases, the parent element is the
document body itself, which is always visible.
The real usefulness of this feature becomes apparent when you change it dynamically. Because all CSS-P data is reflected through the DOM, you can change the visibility
property value whenever you want. Like the left
and top
properties, visibility
is a property of an element's style object. For example, if an element's ID
attribute has a value of "example"
, its visibility
property is:
document.example.visibility
, in Navigator.example.style.visibility
, ordocument.all.example.style.visibility
, in Internet Explorer.
When used in a stylesheet, the visibility
property accepts one of three values, which are the same in Navigator 4.0x and Internet Explorer 4.0x. However, the visibility
property in JavaScript differs between these two browsers:
Stylesheet Property | JavaScript Property | |
Navigator 4.0x | Internet Explorer 4.0x | |
"hide" | "show" | "hide" |
"hidden" | "hide" | "hidden" |
"inherit" | "inherit" | "inherit" |
Now that we know how to show and hide an element, let's take a look at two more animation methods:
function show() {
this.element.visibility = (NS4) ? "show" : "visible";
}
function hide() {
this.element.visibility = (NS4) ? "hide" : "hidden";
}
Since this.element
already reflects the element's style object, all we have to do is assign a value to its visibility
property. Notice the differences between Navigator and Internet Explorer.
Created: April 21, 1998
Revised: April 21, 1998
URL: https://www.webreference.com/js/column18/visibility.html