Uncle Jim's

JavaScript Examples



DHTML Style Properties




DHTML Properties Table

A listing of DHTML properties



This page is dedicated to explaining the various properties and call functions for DHTML.

While discussing DHTML, we want to take note of the differences between the two major browsers. Here let's take a quick look at the two document object models so that when we get to cross-browser coding later, we'll know what we are up against.

In Microsoft Internet Explorer 4+, all (or close to all) the objects on a page are accessible through the use of

document.all

After that, you insert the name of the object and then the property you want to change. For instance:

document.all.object_name.style.left

This would access the left property of the object defined inline in a style tag or through a style class.

In Netscape Navigator 4+, however, we have to go a different (though shorter) route. The drawback is that not all objects are accessible in Netscape as in Internet Explorer. In Netscape, the same property is accessed like this:

document.object_name.left

As you can see, you have to do a little extra coding to make certain scripts work in both browsers.

Another browser difference that can give us fits is the way each browser supports layers. Both browsers support style sheet layers, but Netscape doesn't support them as well as Internet Explorer yet. This means that to do the same thing in Netscape, we often have to add some extra code, or simply decide that the property isn't supported at all.

For instance, a DIV tag can take an onMouseover event in Internet Explorer, but not in Netscape. In Netscape, The LAYER tag is the closest tag for the same effect and will take the onMouseover command.

Since it is ignored by Internet Explorer, we can normally add the LAYER tag with no side effects. The LAYER and ILAYER tags will be handy additions in some of our cross-browser scripts.








Here are some examples of changing your mouseover effects
for table values using JavaScript, DHTML and Style Sheets:

Expand Border


Expand Padding


Expand Spacing


Change Left Margin!

Change Right Margin!

Change Font Variant!

Change Letter Spacing!

Change Font Weight!

Change Font Size!

Change Font Color!

Change Font Face!

Change Border Properties!

Change Top Border!

Change Bottom Border!

Double the Border!

Change BG Color