切換div位置

標籤：style   blog   http   ar   io   color   os   sp   for   

通過數組來存放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>

 

切換div位置