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 - asthe 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 anelement on the page. Remember that style properties which are hyphenated -for example, "background-color" and "font-family" - need to be written as asingle word with the first character after the hyphen capitalized - forexample, "backgroundColor" and fontFamily". The next example shouldillustrate 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 berunning through some simple code examples for simple JavaScriptapplications - image swaps, form validation and frame navigation - usingthe new DOM structures. I'll also be discussing the appendChild() andcreateNode() functions, which allow developers to add new elements to thedocument tree through program code. Don't miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 9 
