Learning JavaScript

Chapter 12. Building Dynamic Web Pages: Adding Style to Your Script

Back in 1996, I was invited to a confidential author introduction for a new technology that Microsoft planned to roll out within the year. I traveled up from Portland, Oregon to Microsoft’s Seattle campus and joined with several other authors and editors from various book companies in a rather nice conference room (with a kicker buffet in the back).

One of the Microsoft managers appeared in front of a projected image of a web page, which wasn’t anything to write home about. That is, until he clicked on a header in the page, and the material below the header was pushed down as a previously hidden paragraph. A small thing, and no big thing now, but back then, I was blown away.

This was my first introduction to the concept that became known as Dynamic HTML or DHTML. I eventually went on to write a book on DHTML, as well as several articles dealing with cross-browser DHTML. The key element to the concept was the introduction of a new W3C specification, Cascading Style Sheets, in addition to the concept of Document Object Model, though there was no universal model at the time.

It’s through CSS that we can define the appearance of page elements without having to rely on external applications, plug-ins, or excessive use of images. It’s also through CSS and stylesheets that we can separate the presentation of page elements from their organization.

However, it was through the DOM that we could access stylesheet properties ...