AJAX In Action [32]
2.4.4 Adding styles to your document
So far, we’ve looked at using the DOM to manipulate the structure of a document—how one element is contained by another and so on. In effect, it allows us to reshape the structures declared in the static HTML. The DOM also provides methods for programmatically modifying the style of elements and reshaping the structures defined in the stylesheets.
Each element in a web page can have a variety of visual elements applied to it through DOM manipulation, such as position, height and width, colors, margins and borders. Modifying each attribute individually allows for very fine control, but it can be tedious. Fortunately, the web browser provides us with JavaScript bindings that allow us to exercise precision where needed through a low-level interface and to apply styling consistently and easily using CSS classes. Let’s look at each of these in turn.
The className property
CSS offers a concise way of applying predefined, reusable styles to documents. When we are styling elements that we have created in code, we can also take advantage of CSS, by using a DOM node’s className property. The following line, for example, applies the presentation rules defined by the declared class to a node: hello.className='declared';
where hello is the reference to the DOM node. This provides an easy and compact way to assign many CSS rules at once to a node and to manage complex stylings through stylesheets.
The style property
In other situations, we may want to make a finer-grained change to a particular element’s style, possibly supplementing styles already applied through CSS. DOM nodes also contain an associative array called style, containing all the fine details of the node’s style. As figure 2.4 illustrates, DOM node styles typically contain a large number of entries. Under the hood, assigning a className to the node will modify values in the style array.
The style array can be manipulated directly. After styling the items in the empty node, we draw a box around them; thus:
Licensed to jonathan zheng 52 CHAPTER 2 First steps with Ajax empty.style.border="solid green 2px"; empty.style.width="200px"; We could just as easily have declared a box class and applied it via the className property, but this approach can be quicker and simpler in certain circumstances, and it allows for the programmatic construction of strings. If we want to freely resize elements to pixel accuracy, for example, doing so by predefining styles for every width from 1 to 800 pixels would clearly be inefficient and cumbersome. Using the above methods, then, we can create new DOM elements and style them. There’s one more useful tool in our toolbox of content-manipulation techniques that takes a slightly different approach to programmatically writing a web page. We close this section with a look at the innerHTML property. Figure 2.4 Inspecting the style attribute of a DOM node in the DOM Inspector. Most values will not be set explicitly by the user but will be assigned by the rendering engine itself. Note the scrollbar: we’re seeing only roughly one-quarter of the full list of computed styles. Licensed to jonathan zheng Loading data asynchronously using XML technologies 53 2.4.5 A shortcut: Using the innerHTML property The methods described so far provide low-level control over the DOM API. However, createElement() and appendChild() provide a verbose API for building a document and are best suited for situations in which the document being created follows a regular structure that can be encoded as an algorithm. All popular web browsers’ DOM elements also support a property named innerHTML, which allows arbitrary content to be assigned to an element in a very simple way. innerHTML is a string, representing a node’s children as HTML markup. For example, we can rewrite our addNode() function to use innerHTML like this: function addListItemUsingInnerHTML(el,text){ el.innerHTML+=" } The