Dynamic Styles

In this column we turn our attention to dynamic styles. Dynamic styles are not a new feature in either one of the major browsers, but they sure have come a long way since version 3.0. Although we cover some of the dynamic styles elsewhere in our other columns and tips, this column should serve both as a summary and as a reference source for finding and implementing various dynamic style strategies.

With today's browsers, you can dynamically change the style of any HTML element. You can change colors, fonts, spacing, indentation, position, and text's visibility. The underlying technology is the Dynamic Object Model (DOM) representation, which makes every HTML element and attribute accessible from a JavaScript script.

In this column you will learn:

• How dynamic styles evolved over the years
• How to change the color
• How to change the font (size and family)
• How to remove an element via a link
• How to remove an element via itself
• How to hide an element without reflowing
• How to change styles using classes

The examples in this column only work in Windows IE 5.X+. A few examples do not work on NS and a few other do not work on MAC IE5.

How dynamic styles evolved over the years