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.
<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";
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
document.all.myDiv.style.pixelLeft += 5;
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.
126.96.36.199. 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.
188.8.131.52. 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.
document.getElementById("myDiv").style.left = "10px";
Copyright © 2003 O'Reilly & Associates. All rights reserved.