CHAPTER 14. JAVASCRIPT AND AJAX 149
The color names must have quote marks around them. Otherwise, they will
be treated as JavaScript variables that are probably undefined.
Reload the page. Then run your mouse over any of the new color words that
appeared. Depending on the word, your page should change color.
Details:
Thespantag simply identifies a portion of your webpage so styles and other
things can be applied to it. Here we use it as a vehicle to let us apply a
JavaScript event handler.
Theonmouseoverattribute for each span specifies a bit of JavaScript that
will be carried out when the mouse passes over the contents of the span.
Thebodyobject is the body of the webpage. It is the same as the
tag that is used to surround the webpage’s content. More properly we
should say document.body because the body is a sub-part of the document,
but body works here.
Thestyleattribute is attached to body. It gives us access to every style
characteristic of the body, including colors, fonts, margins, paddings, you
name it.
Thecolorattribute is attached to style. It represents the foreground color
of the font used.
By changing any attribute, we immediately change that attribute for every-
thing in body, unless something else with a higher priority intervenes.
ThebackgroundColorattribute is attached to style. It represents the
background color of the font used.
14.4 Things To Know
Anything you can do in CSS, you can also do in JavaScript. Anything you
can specify in CSS you can specify or change using JavaScript.
The two ways are intentionally very similar.
InCSS, we would say this:
body { background-color: white; }
InJavaScript, we would say this:
body.style.backgroundColor='white';