Dynamic Styles: Removing An Element via a Link

Dynamic Styles

Removing An Element via a Link

The display property can be used for removing HTML elements from the page and reclaiming the empty space. Notice that using this property yields different results than when using the visibility property. When you turn off the visibility, the HTML element seems to be transparent, but the empty space is not reclaimed. There are a few ways to use the display property. One way is to trigger the disappearance and reappearance of a certain HTML element from another HTML element. The following two paragraphs are from the previous page. Clicking the link in front of them will cause the disappearance of the first paragraph:

Click here to remove or bring back the first paragraph below: Mouse over this paragraph and see how the font size changes to size 30. Mouse out and see it go down to 8. This is a good way to pack more text on a window-size page and let the user magnify the paragraph currently being read. See how the browser reflows the page as if this paragraph was originally written with the current font size. Mouse over this paragraph and see how the font family changes to size Courier. Mouse out and see it changing to Arial. This is a good way to emphasize the paragraph currently being read. See how the browser reflows the page as if this paragraph was originally written with the current font family.

To implement the above behaviour you have to add three items to your page. First, you need to add the line where the user can click to remove or bring back the first paragraph. This is a simple SPAN element:

<SPAN STYLE="cursor: hand; color: tan"
onClick="disappear(fontPar)">Click here to disappear or bring
back the first paragraph below:</SPAN>

Secondly, you have to make sure the first paragraph has an ID which is assigned here the value of fontPar:

<SPAN ID="fontPar" STYLE="color:purple" onMo...

And finally, you need to add the following script that implements the disappear() function:

function disappear(obj) {
  if (obj.style.display == "none") {
    obj.style.display = "";
  }
  else {
    obj.style.display = "none";
  }
}

Notice the specification of the cursor for the link above, cursor: hand. Other values are: crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, test, wait, and help.

How to remove an element via itself

Produced by Yehuda Shiran and Tomer Shiran

Created: August 14, 2000
Revised: August 20, 2000

URL: https://www.webreference.com/js/column66/5.html