切换div位置

通过数组来存放div的属性以及属性值,鼠标点击的时候,切换数组中的元素,然后赋值给div
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 *{margin:0;padding:0;font-size:13px;font-family:"Comic Sans MS", cursive}
 8 #div1, #div2, #div3{100px;height:100px;position:absolute;text-align:center;line-height:100px;}
 9 #div1{background:red;left:0}
10 #div2{background:yellow;left:110px}
11 #div3{background:green;left:220px}
12 </style>
13 </head>
14 <script>
15 window.onload=function(){
16     var arr=[];
17     var aDiv=document.getElementsByTagName("div");
18     for(var i=0;i<aDiv.length;i++){
19        arr.push({'left':getStyle(aDiv,'left')})
20     }
21     
22     document.onclick=function(){
23            
24           arr.push( arr[0] );
25          arr.shift( arr[0] );
26          
27          for(var i=0;i<aDiv.length;i++){
28             aDiv.style.left = arr['left'];
29          } 
30     }
31    
32 }
33 function getStyle(obj,attr){return obj.currentStyle ? obj.currentStyle(obj) : getComputedStyle(obj)[attr]}
34 </script>
35 <body>
36  <div id="div1">1</div>
37  <div id="div2">2</div>
38  <div id="div3">3</div>
39 </body>
40 </html>