Ajax combat: Adding styles to Documents

So far, we've examined the structure of using the DOM to manipulate the document (how one element is contained by another element, and so forth). This allows us to effectively transform the structure declared in static HTML. Dom also provides a different kind of method that allows you to programmatically modify the style of an element and transform the structure defined in the style sheet.

With DOM manipulation, each element on a Web page can have multiple visual styles, such as position, height and width, color, border, and white space. Although it is more granular to control the appearance of elements by modifying each property individually, it is tedious to do so. Fortunately, the Web browser provides the JavaScript bindings we provide, in addition to providing the underlying interface for precise operation, and also allows the CSS classes to be used to set a consistent style for the elements. Let's examine it one by one.

1. ClassName Properties

CSS provides a concise way to apply predefined, reusable styles to your document. When we set styles for elements created in code, we can also use CSS by setting the ClassName property of the DOM node. For example, the following behavior a node sets the display rule defined by the declared class:

Hello.classname= ' declared ';

Where Hello is a reference to a DOM node. This provides an easy and compact way to assign many CSS rules to a node at the same time, and to manage complex styles with style sheets.

2. Style Property

In other cases, we want to change the style of a particular element in a fine-grained way, perhaps simply as a complement to a style that has been applied through CSS.

The DOM node also contains an associative array named style that contains all the details of the node style. As shown in Figure 2-4, the style of a DOM node usually contains a large number of entries. It is little known that assigning classname to a node also alters the value of the style array.

Figure 2-4 checks the DOM node's style property in the DOM inspector. Most of the values are not explicitly set by the user, but are set by the rendering engine itself. Note the next scroll bar: We only see about One-fourth of the list of all the calculated styles.

The style array can also be manipulated directly. After setting the style for an entry in the empty node, we can add a border to it:

Empty.style.border= "Solid green 2px";

Empty.style.width= "200px";

We can also easily simply declare a box class and then apply the style by modifying the ClassName property, but this method is easier to use in certain environments, and it allows you to construct strings programmatically. For example, we want to change the size of an element freely with pixel precision, and if you define a style from 1 to 800 pixels per width, it is obviously inefficient and clumsy.

Using the above methods, we can create new DOM elements and set styles for them. In the Content Processing technology toolbox, there is another useful tool that uses a slightly different approach to writing Web pages through the program, which is the innerHTML attribute, which we end this section by examining this attribute.