Section V.3. Changing Positioning Values via Scripting

V.3. Changing Positioning 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 properties 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. If you intend to limit your positioning scripting to W3C DOM browsers and IE 5 or later, you gain one more vital level of cross-browser compatibility: referencing all elements via the document.getElementById( ) method. All that's left is getting to know the positioning-related style sheet properties.

V.3.1. Referencing Position Styles

With the comparatively convoluted Navigator 4 layer referencing model having faded into ancient history, we are left with an extremely simple paradigm to follow. A syntactical mechanism for reaching any named element on the page (regardless of element nesting) makes it a breeze to modify a position-related property.

Consider the following simple document with a positioned div element nested inside a positioned span element:

 <html> <body> Here's an image <span  style="position: relative">:     <div  style="position: absolute; left: 5px; top: 3px; overflow:     hidden">         <img src="/books/2/570/1/html/2/myImage.gif" height="90" width="120" alt="sample image">     </div> </span> </body> </html>

To move the inner div to the left by five more pixels, a script assigns a new value to the style.left property of the element. The W3C syntax is:

 document.getElementById("inner").style.left = "10px";

The amount of element nesting has no impact on the reference syntax.

V.3.2. Positionable Element Properties

With one exception, the scripted style object's property names are identical to the CSS property names. Table V-3 shows the primary properties that control a positionable element's location, size, visibility, z-order, and background (most of which mirror CSS-P properties).

Table V-3. Common scriptable positioning properties
CSS property	Style property	Notes
`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.
	`pixelTop` `pixelRight` `pixelBottom` `pixelLeft`	IE pixel offset from top, right, bottom, and left edges of positioning context.
	`posTop` `posRight` `posBottom` `posLeft`	IE 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";

V.3.3. Reading Effective Style Properties

Consistent with the way that the W3C DOM equates element properties 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 DOM 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.

V.3.3.1. IE currentStyle property

Starting with IE 5, every element has a currentStyle property. This property returns the same kind of style object as the element's style property, but it is read-only. Adjustments to a styleSheet object get reflected in currentStyle, as do changes to the style property of an object. Most browser-default style attribute values are available through currentStyle, as well.

One important caution: several default IE style settings exposed through currentStyle are returned as the string auto, not the actual measure. If your scripts expect numeric values, be sure to accommodate the non-numeric result.

Windows-only versions of IE 5 and later also produce a runtimeStyle property for each element object. This style object contains values only for those properties whose style properties are explicitly assigned somewhere in the document cascade. The runtimeStyle property is read-only, too.

V.3.3.2. W3C getComputedStyle( ) method

In contrast to the IE approach, the W3C DOM employs a concept it calls the computed style. The syntax required to retrieve a style property currently impacting an element is not so straightforward, but it is in keeping with the rest of the W3C DOM architecture.

The gateway to this style information is the document.defaultView property, which represents the rendering space of a document. One of its methods returns a W3C DOM object of type CSSDeclaration. This object is akin to a style object, but accessing the value of a specific style property requires the getPropertyValue( ) method, and the CSS version of the property name (e.g., "background-color"). The following sequence of statements yields the left property of a positioned element named myDiv:

 var elem = document.getElementById("myDiv"); var vw = document.defaultView; var currStyle = vw.getComputedStyle(elem, ""); var elemLeft = currStyle.getPropertyValue("left");

You can use this feature in Mozilla-based browsers, Safari 1.3/2.0, and Opera 8.

Although a corresponding setPropertyValue( ) method is available, for the sake of convenience, new assignments to a style property in both DOMs should be made through an element object's style object For example:

 document.getElementById("myDiv").style.left = "10px";