(as illustrated in the previous example), manipulate colors, swap paragraphs
and other elements’ positions, adjust sizes and shapes and positions — what-
ever you think up.
Pay no attention to the script itself. It works, and you need not know how or
why. You don’t know how your car’s universal joint works, do you? But you
drive it nonetheless.
Just plug this script into any Web page where you want to dynamically alter
the CSS styles. All you need bother with in this script is what you feed into it
and what it then does for you:
function changestyle(obj,sname,ch) {var dom = document.getElementById(obj).style;
dom [sname] = ch;}To make this work, you must provide three things, called obj, sname,andch
in this code, but the names don’t matter. What you actually provide are the ID
name you assigned to the element (or selector if you prefer), the name of the
property you want changed, and the actual value that you want for this change.
For example, the first changestyleline changes the paragraph with the id
pfirst, changes its font-sizeproperty, and changes the font-sizeto 24
pixels:
<h1 id=”head1” onmouseover=
“changestyle(‘pfirst’,’fontSize’,’24px’);
changestyle(‘head1’,’color’,’green’);”
>Hover mouse here to expand.
</h1>Java and JavaScript, like C and similar languages, are quite strict. Their unnec-
essary punctuation rules, wacky syntax, and spelling restrictions are notorious
for causing countless bugs and wasting countless people’s time. The script in
this example is yet another instance of this sad state of affairs. JavaScript is
case-sensitive. It makes a distinction between the words fontsizeand
fontSize. It won’t even permit you to use the correct CSS term font-size
for this property. JavaScript allows no hyphens, and what’s more, if a word is
made of two words, like font-size, you must remove the hyphen and capi-
talize the first letter of the second word. So fontSizeis the onlyway you can
send the font-sizeproperty to the script. If your scripts aren’t working, make
sure that the property names you’re sending to the script are correctly
capitalized.
You can send as many requests for style changes as you wish to the
changestylefunction. In this example, you made two changes — one to
the size of the paragraph’s text and one to the color of the headline. But be
creative in applying this technique. Consider adding a toggle feature to the