Introduction to DHTML

Changing the Color and Other Properties of an Element

As an example, you can change the background color of the menu on the left by clicking on the boxes below.

The code is amazingly simple. The above rectangles are nothing else but cells of a table with different bgcolor values, and an onclick attribute. Here is code for the yellow cell.

The getElementById('menu') seeks the element whose id is 'menu', in fact our menu is contained in a DIV with id="menu". Then accesses its style and assigns a value of 'yellow' to the background color. All spellings must be exactly as written here, if you write 'backgroundcolor', with a small 'c', it doesn't work

Another example is to change the text properties when the mouse cursor is placed over it. Place your mouse over the following text.

mouse over

Several things happen to this text and the best way to explain it is to see the code. Note that two codes are required, one for mouseover and the other for mouseout. The later are siply empty strings so that default values will apply. Another point to observe is that instead of getElementById we used the word this. This is used when the action to be taken is on the element for which the Javascript code is written.

Hiding and Displaying an Element

Another simple action is to remove the menu alltogether. Click on the following buttons.
Hide menu Show menu

The codes for these buttons are:

The key word here is the style property visibility. If it is assigned a value 'hidden', the element dissapears, the value 'visible' displays it.

Changing the Position of an Element

Is the menu of this page too high uo? You can pull it down here. Click on the following buttons.
Reposition menu Take it back

The codes for these buttons are:

In this case we are playing with the element positioning style properties. The position property can be either absolute or relative. The absolute setting measure distances from the top left corner of the container, while the relative setting measures it from where it is now. Once this is set, we employ style.top to move it up or down, and style.left to move it right or left.

Changing the Content of an Element

In the previous section we saw that the content of a form element can be changed by accessing the element's content thrrough its HTML structure like document.form1.Perc.value. This can only be done to form elements, not to other elements such as our menu. However, there is a way to change the content of any element as long as it has an id assigned to it. And it is by
getElementById("id-of-element").innerHTML = new-content.

The following example changes the content of the lower line when the mouse is placed on the four tabs

Here is the code. It looks complex, but the principle is simple and has to be repeated for the four tabs.