切换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{width: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>
