Javascript Style Control example Display1.htm

Illustrates a JavaScript script block, alert box, and control of the display style of a text block.

Block 2 - visible only AFTER the alert box.
This paragraph is placed in the HTML file before the JavaScript script, with the "display:none" style attribute. So it is not visible when the JavaScript script executes. The JavaScript then makes it visible by setting the display attribute to "block".  Note that this paragraph is in a bordered div, which is not hidden. The border look like a horizontal line when the paragraph is hidden.

Block 3 - visible, in black, before and after the alert box
The executable statements in the Javascript are:

alert("This is a JavaScript alert box.\n\nBlocks 1, 3, and 4 are visible. Block 2 is hidden (though the brown line on the page is a border around it), Block 4 was written by inline JavaScript code, and Block 5, which follows the embedded JavaScript block, hasn't been rendered yet.");

document.getElementById("block2").style.display="block"; // Display block 2

document.getElementById("block1").style.color="green"; // Change block 1 to green

---

---

11/15/2007 Robin.Richmond@tri-c.edu
Back to the ITWM1010 home page