首页 > 代码库 > 切换div位置
切换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>
切换div位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。