JavaScript Dynamic Inline Styles

Dynamic Inline Styles

<!-- This example is from JavaScript: The Definitive Guide, 3rd Edition.   -->
<!-- That book and this example were Written by David Flanagan.            -->
<!-- They are Copyright (c) 1996, 1997, 1998 O'Reilly & Associates.        -->
<!-- This example is provided WITHOUT WARRANTY either expressed or implied.-->
<!-- You may study, use, modify, and distribute it for any purpose,        -->
<!-- as long as this notice is retained.                                   -->

<!-- Here's some HTML.  We're going to animate the color of the named H1. -->
<DIV CLASS="WARNING">
<H2 ID="WARNING1" STYLE="color:red; text-align:center">Red Alert!</H2>
The Web server is on fire!
</DIV>

<SCRIPT>
// Animate the color of the element with ID="WARNING1", by 
// setting properties of its style object every half second.
var colors = ["red", "orange", "black"];  // Cycle through these colors.
var nextcolor = 0;

// Invoke this function to change to the next color.
function changecolor() {
    document.all.WARNING1.style.color = colors[nextcolor++];
    nextcolor = nextcolor % colors.length;
}

// Arrange to call changecolor() every half second.
setInterval("changecolor()", 500);
</SCRIPT>