The ID property of the <DIV> tag allows you to give a unique name to a block of text on your page that you can then access dynamically. Unfortunately this only supported by Microsoft Internet Explorer 4 upwards at the moment.
In the example below, we've put <DIV> tags around an <H1> element and given the ID property the value heading. We can then use the ID property to refer to that section of text by using IE 4's object model, as in:
document.all.heading.
The simple example below illustrates how you can use the <DIV> ID to change one of the style properties for our heading on the fly:
<HTML>
<HEAD><TITLE>DIV Example</TITLE>
<SCRIPT LANGUAGE = "javascript">
function change() {
document.all.heading.style.color = "red";
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=heading STYLE="color: blue" onclick="change()">
<H1> Click to turn this text red. </H1>
</DIV>
<BODY>
</HTML>
Click to turn this text red.
We've only illustrated one simple example of how the <DIV> tag can be put to work; once you've identified a portion of your Web page using the ID tag, either image or text, the possibilities are endless. For more information, see Jalfrezi's section on style sheets.
N.B. This tip forms part of the Dynamic HTML section in Jalfrezi.
©1998 Richard Rutter.
