Dynamically Updating Styles Using DHTML
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function initialize() {
state = 0
if(document.all && !document.getElementById) {
div0 = document.all["d0"]
div1 = document.all["d1"]
div2 = document.all["d2"]
browser = "ie4"
}else if(document.getElementById){
div0 = document.getElementById("d0")
div1 = document.getElementById("d1")
div2 = document.getElementById("d2")
browser = "dom1"
}else{
browser = "unknown"
return
}
divs = new Array(div0, div1, div2)
divStyles = new Array(div0.style, div1.style, div2.style)
}
function moveParagraphs() {
for(var i=0; i<divStyles.length; ++i) {
var x = Math.random()*400
var y = Math.random()*400
moveDivTo(i, x, y)
}
}
function moveDivTo(i, x, y) {
if(browser == "ie4") {
divStyles[i].posLeft = x
divStyles[i].posTop = y
}else if(browser == "dom1") {
divStyles[i].left = x
divStyles[i].top = y
}
}
function slideText(n) {
divStyles[n].visibility = "visible"
var max = (n+1)*100
for(var i=0;i<max;++i) {
setTimeout("moveDivTo("+n+","+i+","+max+")",500)
}
}
function italicize() {
divStyles[0].fontStyle = "italic"
divStyles[1].fontStyle = "italic"
divStyles[2].fontStyle = "italic"
}
function applyDHTML() {
if(browser == "unknown") {
alert("Sorry. Your browser does not provide sufficient DHTML support to run this example.")
return
}
switch(state) {
case 0:
divStyles[0].fontSize = "x-small"
divStyles[0].fontStyle = "italic"
divStyles[1].fontSize = "medium"
divStyles[1].fontVariant = "small-caps"
divStyles[2].fontSize = "x-large"
divStyles[2].fontFamily = "Courier"
break
case 1:
divStyles[0].backgroundColor = "cyan"
divStyles[0].color = "blue"
divStyles[1].backgroundColor = "green"
divStyles[1].color = "yellow"
divStyles[2].backgroundColor = "orange"
divStyles[2].color = "red"
break
case 2:
moveDivTo(0, 50, 300)
moveDivTo(1, 100, 200)
moveDivTo(2, 200, 100)
break
case 3:
interval = setInterval("moveParagraphs()",750)
break
case 4:
clearInterval(interval)
moveDivTo(0, 50, 100)
moveDivTo(1, 150, 100)
moveDivTo(2, 325, 100)
break
case 5:
divStyles[0].zIndex = 100
divStyles[0].width = 400
divStyles[0].height = 300
break
case 6:
divStyles[0].zIndex = 0
divStyles[1].zIndex = 100
divStyles[1].width = 400
divStyles[1].height = 300
break
case 7:
divStyles[1].zIndex = 1
divStyles[2].zIndex = 100
divStyles[2].width = 400
divStyles[2].height = 300
break
case 8:
for(var i=0;i<divStyles.length;++i) {
divStyles[i].fontFamily = "Times"
divStyles[i].fontSize = "xx-large"
divStyles[i].fontStyle = "normal"
divStyles[i].fontVariant = "normal"
}
moveDivTo(1, 150, 150)
moveDivTo(2, 325, 200)
break
case 9:
for(var i=0;i<divStyles.length;++i) {
divStyles[i].color = "black"
divStyles[i].backgroundColor = "white"
divStyles[i].visibility = "hidden"
moveDivTo(i, 0, (i+1)*100)
}
divs[0].innerHTML = "That's"
divs[1].innerHTML = "All"
divs[2].innerHTML = "Folks!"
setTimeout("slideText(0)",500)
setTimeout("slideText(1)",1500)
setTimeout("slideText(2)",2500)
setTimeout("italicize()",5000)
break
case 10:
window.location.reload()
break
}
++state
}
//--></SCRIPT>
</HEAD>
<BODY onload="initialize()">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Apply DHTML Style"
onClick="applyDHTML()">
</FORM>
<DIV ID="d0" STYLE="position:absolute; top:50px">Sample Text 1</DIV>
<DIV ID="d1" STYLE="position:absolute; top:100px">Sample Text 2</DIV>
<DIV ID="d2" STYLE="position:absolute; top:150px">Sample Text 3</DIV>
</BODY>
</HTML>
Related examples in the same category