Java Reference
In-Depth Information
Before you can do anything to the
<div/>
element, you must first retrieve it. You do this simply
by using the
getElementById()
method. Now that you have the element, you manipulate its style
by first italicizing the text with the
fontStyle
property. Next, you underline the text by using the
textDecoration
property and assigning its value to
underline
.
It's very important that the
<div id="divAdvert"/>
element is loaded into the browser before you retrieve
it with
getElementById()
. This is why the
<script/>
element appears after
<div id="divAdvert"/>
. By
the time the browser loads and executes the JavaScript code, the
<div/>
element is loaded into the DOM.
Changing the class attribute
You can assign a CSS class to elements by using the element's
class
attribute. This attribute
is exposed in the DOM by the
className
property and can be changed through JavaScript to
associate a different style rule with the element:
element.className = sNewClassName;
Using the
className
property to change an element's style is advantageous in two ways:
➤
It reduces the amount of JavaScript you have to write, which no one is likely to complain
about.
➤
It keeps style information out of the JavaScript file and puts it into the CSS file where it
belongs. Making any type of changes to the style rules is easier because you do not have to
have several files open in order to change them.
Using the className property
trY it out
Let's revisit the code from
ch9 _ example4.html
from the previous section and make some revisions.
Type the following code:
-transitional.dtd”>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 9, Example 5</title>
<style>
#divAdvert {
font: 12pt arial;
}
.new-style {
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="divAdvert">
