CSS is used to style HTML elements such as layering and positioning the content.
A D V E R T I S E M E N T
wheather u have to learn another language?
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. There are a couple of important points that you should be aware of when you are working with the DHTML client during application development.
Here's a simple demonstration. the text below change color when the mouse
moves over it:
Move your mouse here
The code looks like:
<span id="sometext"
onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">Move your mouse here</span>
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;}
<p id="testP">This is the paragraph.</p>
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
<p style="color: #cc0000">This is the paragraph.</p>
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.
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.
