Learning JavaScript, 2nd Edition

Chapter 12. Dynamic Pages

Dynamic web pages created through the use of JavaScript, previously called DHTML or Dynamic HTML and now typically called Ajax, have been around for close to 12 years. The key element to the concept was the introduction of Cascading Style Sheets (CSS) in addition to the Document Object Model (DOM), though there was no universal object model in the early years.

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 from JavaScript, changing individual element properties even after the page had finished loading. Combined with CSS, this was a powerful means to make web pages far more interactive than ever before.

JavaScript, CSS, and the DOM

This chapter assumes that you’re familiar with CSS and how to add stylesheets to a web page. If you’re unfamiliar with CSS, you may want to read a good tutorial or book on CSS before reading the rest of this chapter. I recommend Eric A. Meyer’s CSS: The Definitive Guide (O’Reilly).

The Style Property/Attributes

Typically, you retrieve and set CSS style properties via the style property. The concept of style as a property originated with Microsoft, but the World Wide Web Consortium (W3C) adopted and included it in the DOM Level 2 CSS module. ...