• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

12. Visual Effects for Stationary Content > 12.7. Hiding and Showing Elements

Hiding and Showing Elements

NN 6, IE 5

Problem

You want to hide a currently visible element or show a currently hidden element.

Solution

Two CSS style properties (and their corresponding scripted properties) influence the visibility of an element, but your choice of usage has a big impact on the results of showing or hiding an element. The less-intrusive property is style.visibility , whose fully supported values are hidden, inherit, or visible, as in the following example that hides an element:

document.getElementById("warning").style.visibility = "hidden";

Changing this value has no affect on surrounding content. The other relevant property, style.display , when set to none, removes the element from rendering flow of the page, forcing surrounding content to cinch up to fill the space formerly occupied by the element:


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint