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.