HTML and CSS Reference
In-Depth Information
EXAMPLE
14.32 (
CONTINUED
)
<div id="third"
style="position:absolute; top:150px">and
three!</div>
<form>
<input type="button" value="move and color text"
10
onClick="colorText()">
</form>
</body>
</html>
EXPLANATION
1
A CSS class for a style is defined. Text will be a red, Verdana font, point size 32.
The rgb (red, green, blue) color is used here for demonstration. It would be easier
to just assign
red
to the
color
property.
2
A CSS class for another style is defined. The text will be a blue, Verdana font, point
size 36.
3
A CSS class for a third style is defined. The text will be a green, Verdana font, point
size 40. Notice that each class not only changes the color of the font, but increases
its point size.
4
When the
onload
event handler is triggered, just after the document has been
loaded, the user-defined
init()
function is called. The
getElementById()
method re-
turns references to three
div
objects.
5
A function called
colorText()
is defined. It sets the position of the
div
containers
and defines the color for the text in each container.
6
The
className
property is used to reference the CSS class named
red
, defined in
the document.
7
The
className
property is used to reference the CSS class named
blue
, defined in
the document.
8
The
className
property is used to reference the CSS class named
green
, defined in
the document.
9
The positions for each of the
div
containers are defined.
10
When the user clicks this button, the
onClick
event is triggered. It invokes the
col-
orText()
function, which will move and change the text in each of the
div
contain-
ers. The output is displayed in Figures 14.37 and 14.38.
