Rough Guide To The DOM (part 1) - Shazam! (
Page 8 of 8 )
The DOM also allows you to modify CSS properties of specific HTML tags - as
the following example demonstrates:
<html>
<head>
<script language="JavaScript">
function disappear()
{
var obj = document.getElementById("mirage");
obj.style.display = "none";
}
</script>
</head>
<body>
<div id="mirage">
Now you see it...
</div>
<a href="javascript:disappear()">...now you don't!</a>
</body>
</html>
I've done something similar in the very first example in this article -
take a look at that one too, while you're at it.
Using this technique, it's possible to apply almost any inline style to an
element on the page. Remember that style properties which are hyphenated -
for example, "background-color" and "font-family" - need to be written as a
single word with the first character after the hyphen capitalized - for
example, "backgroundColor" and fontFamily". The next example should
illustrate this clearly:
<html>
<head>
<script language="JavaScript">
function transform()
{
var obj = document.getElementById("marvel");
obj.style.fontFamily = "Verdana";
obj.style.fontSize = "40pt";
obj.style.backgroundColor = "red";
obj.style.color = "black";
obj.style.textDecoration = "underline";
obj.style.textAlign = "center";
obj.style.letterSpacing = "10";
}
</script>
</head>
<body>
<div id="marvel">
Captain Marvel
</div>
<a href="javascript:transform()">shazam!</a>
</body>
</html>
That's about it for the moment. In the second part of this article, I'll be
running through some simple code examples for simple JavaScript
applications - image swaps, form validation and frame navigation - using
the new DOM structures. I'll also be discussing the appendChild() and
createNode() functions, which allow developers to add new elements to the
document tree through program code. Don't miss it!
/ 10 
