 |  |
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.1. Referencing Position Styles
With the comparatively convoluted Navigator 4 layer referencing model fading 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 id="outer" style="position:relative">:
<div id="inner" style="position:absolute; left:5px; top:3px; overflow:hidden">
<img src="myImage.gif" height="90" width="120">
</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. In IE 4 syntax, the statement is:
document.all.inner.style.left = "10px";
The corresponding W3C syntax is:
document.getElementById("inner").style.left = "10px";The amount of element nesting has no impact on the reference syntax.
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 |
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-only pixel offset from top, right, bottom, and left edges of positioning context. |
|
posTop postRight posBottom posLeft |
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.
4.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.
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 attributes are explicitly assigned somewhere in the document cascade. The runtimeStyle property is read-only, too.
4.3.3.2. W3C getComputedStyles( ) 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. 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 Netscape Navigator starting with Version 6.1.
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"; |  | |
| 4.2. Positioning Attributes |  | 4.4. Cross-Platform Position Scripting |
Copyright © 2003 O'Reilly & Associates. All rights reserved.