spacer
Yehuda Shiran August 21, 2000
Changing the Font Size on the Fly
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

Color change 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 code to implement it:

<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>

Learn more about the subject in Column 66, Dynamic Styles.


People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark