JavaScript® Bible, Seventh Edition

Chapter 38. Style Sheet and Style Objects

IN THIS CHAPTER

• Managing style sheets by script

• Changing element styles on-the-fly

• Distinguishing among style, styleSheet, and style objects

Style sheets promote a concept that makes excellent sense in the fast-paced, high-volume content creation environment that is today's World Wide Web: separating content from its rendering. Textual content may come from any number of electronic sources, but it may need to be dropped into different contexts—just like an online news feed that becomes amalgamated into dozens of web portal sites, each with its own look and feel. All the content author cares about is the text and its meaning; the web page designer then decides how that content should be rendered on the page.

The style sheet concept has other advantages. Consider the large corporate web site that wants to promote its identity through a distinct style. A family of style sheets can dictate the font face, font size, the look of emphasized text, and the margin width of all body text. To apply these styles on an element-by-element basis is not only a tedious page-authoring task; it is fraught with peril. If the style is omitted from the tags of one page, the uniformity of the look is destroyed. Worse yet, if the corporate design changes to use a different font face, the task of changing every style in every tag—even with a highly powered search-and-replace operation—is risky. But if a single external style sheet file dictates the styles, then the designer ...