JavaScript® Bible, Sixth Edition

Chapter 26. Style Sheet and Style Objects

IN THIS CHAPTER

• Managing stylesheets by script

• Changing element styles on the fly

• Distinguishing among style, styleSheet, and style objects

Stylesheets 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 the rendering details of the content. 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 stylesheet concept has other advantages. Consider the large corporate web site that wants to promote its identity through a distinct style. A family of stylesheets 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 would not only be 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 stylesheet file dictates ...