Introduction to the DOM of IE 5/ NS 6

Animation is defined as the movement of elements around the screen, and also often includes the manipulation of some other styles, including the spacing between letters & words, and the size of text. Just as with all other examples we have seen so far, you must first locate the object you wish to manipulate. Once again, you may use either the ID or the document tree hierarchy. The elements obj.style.top and obj.style.left are the key to movement around the screen. However, these elements return the number & the units (px, em, etc..). Internet Explorer 4/5+ expose 4 other properties: obj.style.posTop, obj.style.pixelTop, and obj.style.posLeft, obj.style.pixelLeft. The pixelTop / pixelLeft properties return the left / top position in pixels, and the posTop / posLeft properties return the top / left position in whichever unit they were specified in. However, these objects have not been standardized, and so we will not use them here.

Many different functions exist for the manipulation of elements in the IE / NS DOM, but I have found the most useful to be those that accept three parameters - the object, and the x and the y values to add or subtract from the objects position. Please also keep in mind that to manipulate an object with these functions, it must have its position property to set to either relative or absolute, and must have a top & left coordinate. If you do not wish to take this object out of the "flow" of the page, use position: relative, left: 0px, top: 0px. This will keep the object in the same position it would normally take in the page, but allow it to be moved dynamically.

function MoveBy(obj,x,y)
{
     if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
     {
         obj.style.left = parseInt(obj.style.left) + x;
         obj.style.top = parseInt(obj.style.top) + y;
     }
}

For example, if I wanted to move the IMG with the ID "myImg" 5 pixels (or whatever unit it was originally specified in) to the left, I would use:

MoveBy(document.getElementById('myImg'), -5, 0);

Which subtracts 5 from the objects left position, and does not change the objects top position at all. However, this function is not extremely useful when you wish to move an element to a certain position on the screen, and are not certain of its current position. For these purposes, I use another function, which I call MoveTo(). It also accepts three parameters - the object to move, the new x position, and the new y position. An optional fourth parameter is the units to use. If not specified, it will default to px.

function MoveTo(obj,x,y)
{
     if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
     {
         obj.style.position = "absolute";
         var units = (MoveTo.arguments.length > 3) ? MoveTo.arguments[3] : "px";
         obj.style.left = x + units;
         obj.style.top = y + units;
     }
}

You can call this with just about element which can be positioned either relatively or absolutely. To move an object, you would simply put a call to MoveBy() in a function which calls itself every 100 milliseconds or so. For example:

function MoveIMG()
{
     imgOb = document.getElementById("myImg");
     MoveBy(imgOb, 1, 0);
     if (parseInt(imgOb.style.left) < 200) setTimeout("MoveIMG()", 100);
}

Please remember that the top and left positions are not all that can be manipulated in the DOM. Some other noteworthy properties are: letter-spacing, word-spacing, font-family, font-size, color, background, width, height, border, margin, padding, and border-style. The letter-spacing & word-spacing properties are represented in em, font-family is represented by any valid font, font-size defaults to em, color & background take any valid color, width and height default to px, border, margin, and padding take both a color value and a pixel value ("border: blue 3px"), and border-style accepts either solid, dotted, or a null string.

Well, and with animation we come to an end of this tutorial. Remember, eventually, not only is it important to learn the DOM, but imperative, assuming you still wish to stay in the game of scripting. Below are a few additional resources on the WWW that discuss the DOM:

This tutorial is written (except for page 1 and conclusion) and contributed by . Edited by JavaScript Kit. You can visit Timothy's homepage here.