DHTML CSS

DHTML is NOT a scripting language like Javascript, but simply a browser feature, or enhancement,that gives your browser the ability to be dynamic. What really want to learn is not DHTML itself but rather, the syntax needed to use DHTML. It is the ability of the browser to alter a web page's style and look after the page has loaded.

Here's a simple demonstration. the text below change color when the mouse moves over it:

Move your mouse here

The code looks like:

Move your mouse here

In order to get this effect, I first gained access from the element's ID. Then, through the style object, and finally the style's color property. All style properties are read/write, and are accessed in a similar manner: element id->style object->property name.

DHTML includes CSS and JavaScript

By means of JavaScript, DHTML is the changing of the style declarations of an HTML element. For instance,if you have a paragraph with a certain text,color defined by

p {color: #cc0000;}

you can do something like

element.style.color = '#00cc00';

as soon as this bit of script is executed the text colour changes from red to green.

Unfortunately this simple bit of DHTML is not supported by Netscape 4. In fact, Netscape 4 only supports the moving of elements across the page and making them invisible (and a few other things, but these are the most important) and visible. So we give an element a position on the page:

div {position: absolute;
top: 20px;
left: 0px;}

and then change its left:

element.style.left = 200;

Now element magically moves to 200 pixels from the left margin of the page.

The style property

So generally,you first go to the HTML element in Internet Explorer you want to influence like :-

document.all['tobechanged'].style.left = 200;

then change the style declarations:

element.style.styleDeclaration

If you want to change color, styleDeclaration is color, if you want to change the left, it is left. If you want to change a style declaration with a dash in it, for instance z-index, remove the dash and make the first letter after the dash a capital: zIndex. Same for margin-left => marginLeft.

Note that the style property reflects the inline styles of the element. This is important if you want to read out the styles of the element. If you try to read out the color of the paragraph:

p#testP {color: #cc0000;}

This is the paragraph.

alert([testP].style.color);

you get an empty alert. This is because the P doesn't (yet) have an inline color style. The style defined by p#testP is not readable through the style property.
You define your styles inline, it works fine

This is the paragraph.

alert([testP].style.color);

Netscape 4

The .style property is required in all browsers, except for Netscape 4

The correct element

So changing the style of a certain HTML element is not difficult, except that many things won't work in Netscape 4. However, you also have to tell the browser which HTML element you want to influence. To do this, you must invoke it by its correct element ID

[content of div]

and write the DHTML script to call on that ID:

[element with ID=tobechanged].style.left = 200;

There are two problems here. first is the proper definition of a layer in Netscape 4, and second is the differences in DOM (Document Object Model) between the various browsers.

Layers in Netscape 4

If you want to change the style of an element in Netscape 4, that element must have a position declaration in the style sheet. If you don't give it a position, Netscape 4 simply does not recognize the element as a layer and throws up error messages.

For example:

div#tobechanged {position: absolute;
top: 20px;
left: 0px;}

Now the DIV with ID="tobechanged" has a position and Netscape 4 recognizes it as a layer. You can also use position: relative. This means that the element is positioned by the natural flow of the page, but is nonetheless open to DHTML influence.

So take care to give your layers a position.

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.