Dynamically Updating Styles Using DHTML : HTML Style « HTML « JavaScript DHTML






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

1.Paragraph Style
2.Make text bold by replaces it in the tree with an Element node
3.Using document create Style Sheet
4.Reading the canHaveChildren Property
5.Change the Text style Properties
6.Change html style
7.Using getBoundingClientRect()
8.Get Element style
9.'EM' and 'P' element