An Introduction to Dynamic HTML (DHTML)

Once you've positioned a content block on the page using <DIV> tags in your HTML, you can use JavaScript to modify its properties. This has many possible consequences: you can move the entire block up, down, left or right. You can change its background color, or change the clipping region, causing more or less of the block to be visible. Speaking of visibility, you can even hide or show the entire block in an instant via the visibility property.

How, then, does JavaScript access the style properties of the content block? The answer is twofold:

1. Assuming that you are familiar with JavaScript, you know that data structures are represented as objects, and each object has a set of properties. JavaScript statements can read or write to the properties of an object.

2. Content blocks contained in <DIV> tags are exposed as objects to JavaScript by the Document Object Model. This means that, following the object and property specifications defined by the DOM, JavaScript can access the style sheet properties of the content block. Voila!

Let's recall our example content block, mailblock. In its simple form:

<DIV ID="mailblock" STYLE="position:absolute; width:auto; height:auto; left:400px; top:50px; background-color:white">
<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>
<IMG SRC="mailbox.gif" width=30 height=15 alt="Mailbox">
</DIV>

Because Netscape and Microsoft do not currently share compatible DOM's, the above block is exposed to different objects in each browser. For now, we'll consider each case separately -- a future article will look at the issue of patching over this problem in "cross browser DHTML."

In Netscape's DOM, each <DIV> block takes the form of a Layer Object. In Microsoft, each block is exposed as a DIV object, which in turn possesses a STYLE object, whose properties reflect the familiar style attribute properties.This might sound confusing, but it's all a matter of syntax. Let's first consider how you would construct a JavaScript reference to mailblock. You use the identifier specified in the ID attribute:

Microsoft:

document.all["mailblock"]

Netscape:

document.layers["mailblock"]

Now, let's consider the background color property for mailblock. The CSS property for the background color was "background-color" as specified in our <DIV> tag. When reflected via the DOM, however, this property takes on a different name between browsers:

Microsoft:

document.all["mailblock"].style.backgroundColor

Netscape:

document.layers["mailblock"].bgColor

Knowing that, we can easily create a JavaScript statement which would change the background color of mailblock to green.

Microsoft:

document.all["mailblock"].style.backgroundColor="green";

Netscape:

document.layers["mailblock"].bgColor="green";

Similarly, we can modify the top and left style properties which will move the block on-screen. Thus, once we know the correct DOM property for the style sheet left property, we can move mailblock directly to the left edge of the page:

Microsoft:

document.all["mailblock"].style.left="0px";
OR
document.all["mailblock"].style.pixelLeft=0;

Netscape:

document.layers["mailblock"].left=0;

Once again, you're likely asking just how one is supposed to discover which DOM properties for which browser map to the style sheet properties we've seen. Two handy on-line references are once again provided -- Netscape's Using JavaScript with Positioned Content (Table 9.1) lists the Layer Object's properties and Microsoft's currentStyle Object Reference lists the properties relevant to their style object. In the effort to make life simpler, however, we provide a dandy table which summarizes which style sheet properties map onto which DOM properties for each browser.

CSS Property	Netscape Layer Object Property	Microsoft currentStyle Object Property
position	none	position Note: read-only, cannot modify via script
width	none	pixelWidth
height	none	pixelHeight
left	left Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: left=10 or left="20%"	left or pixelLeft Note: pixelLeft accepts a string which specifies measurement units; e.g. pixelLeft="10px" whereas left accepts an integer and assumes pixel units; e.g. left=10.
top	top Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: top=10 or top="20%"	top or pixelTop Note: pixelTop accepts a string which specifies measurement units; e.g. pixelTop="10px" whereas top accepts an integer and assumes pixel units; e.g. top=10.
clip	clip.top clip.left clip.right clip.bottom clip.width clip.height Each dimension of the clipping coordinates is its own property, as seen here. Changing any property immediately causes the on-screen clip to change.	"rect(top right bottom left)" To change the clip in MSIE you must redefine all clipping coordinates. The syntax can be a bit confusing. Example: document.all.blockname.style.clip="rect(0 25 25 0)"< /FONT>
visibility	visibility May contain any of "inherit", "show", or "hide"	visibility May contain any of "inherit", "visible", or "hidden"
z-index	zIndex Any non-negative integer.	zIndex MSIE allows negative integers, but you may as well stick with positive for the sake of Netscape.
background-color	bgColor Accepts string containing pre-defined color name or hex RGB triplet. Examples: document.layers["blockname"].bgColor="black" document.layers["blockname"].bgColor="#000000"< /FONT>	backgroundColor Accepts string containing pre-defined color name or hex RGB triplet. Examples: document.all.blockname.style.backgroundColor="black" document.all.blockname.style.backgroundColor="#000000"< /FONT>
background-image	background.src Example: document.layers["blockname"].background.src="images/tile.jpg"< /FONT>	backgroundImage Example: document.all.blockname.backgroundImage="images/tile.jpg"< /FONT>