home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

4.3. Changing Attribute Values via Scripting

Content authors who wish to include DHTML positioning in their pages benefit from a fortunate confluence of standards and browser implementation trends. From one direction, modern browsers expose positioning attributes as properties of a style object. From the other direction, both the IE 4 and W3C DOMs expose the style object as a property of every rendered element object. All that's left for the cross-DOM scripter is reconciling the basic element referencing syntax (document.all versus document.getElementById( )) and the property name equivalents to the positioning-related style sheet attributes.

4.3.2. Positionable Element Properties

The next piece of the cross-browser positioning puzzle involves the actual style object's property names. Table 4-3 shows the primary properties that control a positionable element's location, size, visibility, z-order, and background (many of which mirror CSS-P attributes).

Table 4-3. Common scriptable positioning properties

CSS attribute

Style property


position position

The type of positioning (absolute, relative, fixed, static, inherit).

top top

String value containing the numeric length and the unit of measure (e.g., "20px") of offset from top edge of current positioning context. Read numeric value only via parseInt( ) function (or IE's pixelTop property).

right right

Same as top, but for right edge.

bottom bottom

Same as top, but for bottom edge.

left left

Same as top, but for left edge.

clip clip

String value describing shape and measure (from 0,0 of element) of cropped edges (e.g., "rect(0px, 130px, 80px, 0px)").

visibility visibility

The visibility type (visible, hidden, or inherit).

z-index zIndex

The integer stacking order of the element.


IE-only pixel offset from top, right, bottom, and left edges of positioning context.


IE-only offset from top, right, bottom, and left edges of positioning context in inherited units.

Note that IE defines two sets of measurement properties not present in the W3C standard. These properties (such as pixelTop and posTop) are numeric values, whereas the regular properties are strings that include the numeric value and the units (or % symbol). Numeric property values lend themselves to shortcuts when used with JavaScript by-value operators. For example, the statement:

document.all.myDiv.style.pixelLeft += 5;

increases the left style property value by five pixels. To accomplish the same in W3C-only syntax (also supported in IE), you have to work with the parseInt( ) function, as in:

var currStyle = document.getElementById("myDiv").style;
currStyle.left = (parseInt(currStyle.left) + 5) + "px";

4.3.3. Reading Effective Style Properties

Consistent with the way that the W3C DOM equates element attributes with their respective object properties, the style property of an element object reveals only those values that are assigned to the element's style attribute in the tag. The bulk of style sheet rules, however, appear elsewhere in the document. IE 5 and later and the W3C DOMs provide different mechanisms for reading style values being applied to an element, regardless of the source of the style rule. This is particularly important in some positioning tasks because a script must know initial values before it can increment or decrement the value.

Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.