通过数组来存放div的属性以及属性值,鼠标点击的时候,切换数组中的元素,然后赋值给div

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 *{margin:;padding:;font-size:13px;font-family:"Comic Sans MS", cursive}

 #div1, #div2, #div3{width:100px;height:100px;position:absolute;text-align:center;line-height:100px;}

 #div1{background:red;left:}

 #div2{background:yellow;left:110px}

 #div3{background:green;left:220px}

 </style>

 </head>

 <script>

 window.onload=function(){

     var arr=[];

     var aDiv=document.getElementsByTagName("div");

     for(var i=;i<aDiv.length;i++){

        arr.push({'left':getStyle(aDiv,'left')})

     }

     document.onclick=function(){

           arr.push( arr[] );

          arr.shift( arr[] );

          for(var i=;i<aDiv.length;i++){

             aDiv.style.left = arr['left'];

          }

     }

 }

 function getStyle(obj,attr){return obj.currentStyle ? obj.currentStyle(obj) : getComputedStyle(obj)[attr]}

 </script>

 <body>

  <div id="div1"></div>

  <div id="div2"></div>

  <div id="div3"></div>

 </body>

 </html>

切换div位置的更多相关文章

  1. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  2. 2016/7/30 div位置设置，表格大小统一

    在做作业过程中遇到的一些问题和我的总结 1.作业中给出了一张背景图,并让我在背景图中一片区域写内容 我的思路是将一个div放在这片区域,那么问题就是如何定义div的位置和大小 查阅资料后发现并不复杂, ...

  3. 鼠标滑过切换div显示（鼠标事件）

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. jquery 点击切换div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  7. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

  8. div位置设置

    div居中显示 margin:0 auto div中的内容居中显示 text-algin:center div靠右显示 float:right 设置div元素的右外边距 margin-right:10 ...

  9. div切换 div轮换显示

    原文发布时间为:2009-05-10 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

随机推荐

  1. 前端性能优化---减少http请求数量和减少请求资源的大小

    减少http请求数量:就是资源的合并 减少http请求大小:就是资源的压缩   一.资源合并的原理:   资源不合并的缺点: 1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行 ...

  2. BZOJ 4811 树链剖分+线段树

    思路: 感觉这题也可神了.. (还是我太弱) 首先发现每一位不会互相影响,可以把每一位分开考虑,然后用树链剖分或者LCT维护这个树 修改直接修改,询问的时候算出来每一位填0,1经过这条链的变换之后得到 ...

  3. Android内存管理（6）onTrimMemory，onLowMemory，MemoryInfo()

    转自: http://www.cnblogs.com/sudawei/p/3527145.html 参考: Android Application生命周期学习 Android中如何查看内存(上) An ...

  4. Swift自适应布局（Adaptive Layout）教程

    通用的Storyboard 通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不同尺 ...

  5. Leetcode0006--ZigZag Conversion

    [转载请注明]https://www.cnblogs.com/igoslly/p/9017638.html 来看一下题目: The string "PAYPALISHIRING" ...

  6. http通信流程

    Host https://www.charlesproxy.com Path / Notes SSL Proxying not enabled for this host. Enable in the ...

  7. 【转】关于JMeter线程组中线程数，Ramp-Up Period，循环次数之间的设置概念

    关于JMeter线程组中线程数,Ramp-Up Period,循环次数之间的设置概念 笔者是个刚刚踏入压力测试领域不到2个月的小菜,这里分享一下线程组中3个参数之间关系的个人见解,不喜请!喷!,望大家 ...

  8. HDU 1907 John（博弈）

    题目 参考了博客:http://blog.csdn.net/akof1314/article/details/4447709 //0 1 -2 //1 1 -1 //0 2 -1 //1 2 -1 / ...

  9. 数据结构与算法(5) -- deque

    vector是单向开口的连续线性空间,deque则是一种双向开口的连续线性空间.所谓双向开口,意思是可以在头尾两端分别做元素的插入和删除操作.stl中deque与vector最大的差异,一在于dequ ...

  10. Linux下源码安装Peach-2.3.8教程

    在peach文件夹下运行 python peach.py ./samples/HelloWorld.xml 提示先安装4Suite-XML. 根据提示在dependences文件夹下安装,出现两次错误 ...