Dynamic Styles: Removing An Element via Itself

Dynamic Styles

Removing An Element via Itself

The second way to use the display property is to dynamically modify it from the element itself. For example, you can implement your page in such a way that the user may remove a paragraph when he or she wants to squeeze the amount of data on the page. Since the paragraph is removed, there is no way to return it but by reloading the page or implementing a link that, upon clicking reclaims the lost data. The following tutorial page demonstrates the first of these options. Mouse over any of the examples below to remove them. Reload the page from the browser menu to return the page to its initial condition:

So far in this column we have taught you how to use the following dynamic style strategies:

Reassigning the SRC attribute of an IMG element:

Using the onPropertyChange event handler to do an extra action:

Changing the font size:

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.

Changing the font family:

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.

Removing a paragraph by clicking a link:

Click here to disappear 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.

We just copied all examples from previous pages and wrapped each one of them in a DIV element:

<DIV onMouseOver="this.style.display = 'none'">
  <SPAN ....
  </SPAN>
</DIV>

Obviously, the examples on this page are not functional because they disappear immediately when you mouse over them. Go back to previous pages to play around with these examples.

How to hide elements without reflowing

Produced by Yehuda Shiran and Tomer Shiran

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

URL: https://www.webreference.com/js/column66/***PASTE FILENAME HERE***