Dynamic Styles: Changing the Font

Dynamic Styles

Changing the Font

The color change we have dealt with previously is a relatively simple task for the browser, as the size of the element does not change and there is no need to reflow the document. This is not the case when you change other style properties, such as fontSize or fontFamily. When they change, the amount of space required by the element changes as well, and the browser needs to reflow the document to ensure a perfect layout. Let's take the following paragraph as an example. Mouse over and out of it:

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.

Here is the HTML code that implements the above paragraph:

<SPAN STYLE="color:purple" onMouseOver="this.style.fontSize =
 '30'" onMouseOut="this.style.fontSize = '6'">
 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.
</SPAN>

Similarly, reflowing of the page is also needed when the font family changes. Mouse over and out of the following page to see this effect. Transition is smoother when you mouse out of the side lines:

Mouse over this paragraph and see how the font family changes to 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.

Here is the HTML code that implements the above paragraph:

<SPAN STYLE="color:purple" onMouseOver="this.style.fontFamily =
 'Courier'" onMouseOut="this.style.fontFamily = 'Arial'">
 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.
</SPAN>

How to remove an element via a link

Produced by Yehuda Shiran and Tomer Shiran

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

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