Приглашаем посетить
Dynamic Styles
PART IIIChapter 11
Dynamic Styles
Dynamic styles are an integral component of interactive Web pages. The
document's appearance is defined using style sheets and HTML. Dynamic styles
use the object model to modify the document's CSS (Cascading Style Sheets)
in order to change the appearance of the document. The syntax for declaring
a CSS was introduced in Chapter 1, "Overview of HTML and CSS." This
chapter focuses on modifying style sheets using scripts in order to alter the
document's appearance.
By applying dynamic styles, you can transform existing documents
into more exciting documents without a loss of contents on down-level
browsers. On a down-level browser, the document appears static, but when
Dynamic HTML is supported the document comes to life. Because the easiest and
most effective way to learn about dynamic styles is to study and review code
samples, this chapter provides a large number of Plug and Play code modules.
The purpose of these examples is to demonstrate how to apply various
techniques for creating more interactive documents.
The following topics are covered in this chapter:
- Dynamic styles and
CSS This section introduces the relationship between CSS and dynamic styles and compares the relationship
between dynamic styles applied to CSS and procedural style sheet
languages such as JavaScript Accessible Style Sheets (JASS)
included in Netscape Navigator 4.0.
- Style sheet
properties This section describes how style sheet
properties are exposed by the object model. CSS properties do
not always translate easily into object model properties because a
single attribute may contain many properties. For example, the
background attribute contains background color, image, and repeat
information.
- Inline
styles This section shows you how to program the inline
style of an element, the simplest technique for adding dynamic styles.
A style property that provides access to all the CSS-related
properties is exposed on every element.
- Changing the
class attribute A simple and elegant technique
for creating dynamic styles is to write code that modifies the
class or id attribute to associate an element with a different contextual
rule. This section provides reusable examples that illustrate this
technique.
- Global style
sheets Changing the inline style and the class
attribute are direct modifications of an element. The
document object exposes a
styleSheets collection that represents all the Style elements
and linked style sheets in the document. This collection lets you
modify the individual style sheets directly and thereby apply formatting
to the entire document.
-
Techniques This chapter concludes with three sections that
describe techniques for taking advantage of the features
introduced throughout the chapter. The section "Adaptive Layout
Techniques" shows you how to make a document change in response to the
environment. "Data Display Techniques" demonstrates hiding
and showing data in response to the user. "Text Animation
Techniques" shows you how to change styles in response to a timer.
The samples demonstrating these techniques are included
on the companion CD.
[Содержание]