ch13-08.html 1.57 KB
Newer Older
O'Reilly Media, Inc.'s avatar
O'Reilly Media, Inc. committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>One-Off/Object Literal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div
{
   margin: 20px;
   width: 200px; height: 200px
}
#div1
{
   background-color: #ffff00;
}
#div2
{
   background-color: #00ff00;
}
</style>
<script type="text/javascript">
//<![CDATA[

var flipper  = {
   obj1 : null,
   obj2 : null,
   getStyle : function (obj, jsStyleName, styleName) {
      if (obj.currentStyle) {
         return obj.currentStyle[jsStyleName];
       } else if (window.getComputedStyle) { 
         return document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
       } else {
        return undefined;
      }
   },
   setBackgroundColor : function(obj, color) {
      obj.style.backgroundColor=color;
   },
   flipColors : function()  {
      var color1 = this.getStyle(this.obj1, "backgroundColor", "background-color");
      var color2 = this.getStyle(this.obj2, "backgroundColor", "background-color");
      this.setBackgroundColor(this.obj1,color2);
      this.setBackgroundColor(this.obj2,color1);
   }
};

window.onload = function() {
   flipper.obj1 = document.getElementById("div1");
   flipper.obj2 = document.getElementById("div2");
}

document.onclick = function() {
  flipper.flipColors();
} 
//]]>
</script>
</head>
<body>
<div id="div1">
<p>This is first square</p>
</div>
<div id="div2">
<p>This is the second square</p>
</div>
</body>
</html>