通过数组来存放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. Tempter of the Bone------剪枝

    看了好多别人的  代码,最终还是 感觉 这种代码的风格适合我  下面附上代码 /* 首先 应该充满信心! 先写出来 自己的程序 然后慢慢改 , 如果是 答题思路错误的话 借鉴别人的 代码 再写 */ ...

  2. vue学习记录（一）—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

  3. 【NOIP2016】DAY1 T2 天天爱跑步

    [NOIP2016]DAY1 T2 天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要玩家每天按时 ...

  4. Java系列学习(七)-面向对象

    1.成员变量和局部变量的区别 (1)在类中的位置不同 成员变量:类中 方法外 局部变量:方法中 (2)在内存中的位置不同 成员变量:在堆中 局部变量:在栈中 (3)生命周期不同 成员变量:随着对象的创 ...

  5. MVC系列学习(四)-初识Asp.NetMVC框架

    注:本文章从伯乐那盗了两张图,和一些文字: 1.MVC设计模式 与 Asp.Net Mvc框架 a.MVC设计模式 MVC设计模式 是一种 软件设计模式,将业务逻辑 与 界面显示 分离,并通过某种方式 ...

  6. Python语言之变量1(数值，字符串，布尔)

    1.数值 整数:2, -2 长整数:2**1024, 2**2048(真的可以很~长~~~,手残算了个2**100000,IDLE还真给打出来了,ORZ) 浮点数:7.05, 1E2(100.0), ...

  7. （三）Python 学习第三天--GUI桌面项目

    (代码参考了别人的代码,只做学习用途!!!最近因为写论文,好久没有记录,好内疚...今天学习了一个小案例,做一下) 主要使用模块:tkinter 代码如下: from tkinter import * ...

  8. Caffe RPN ：error C2220: warning treated as error - no 'object' file generated

    在 caffe里面添加rpn_layer.cpp之后,总是出现 error C2220: warning treated as error - no 'object' file generated 这 ...

  9. docloud后台管理项目(前端篇)

    以下内容与主题无关,如果不想看可以直接忽视 !--忽视开始--! 给大家推荐一款强大的编辑器,那就是集响应快.体验好.逼格高.功能丰富为一体的sublime text 3.它除了以上特点,还有一个最重 ...

  10. 【sqli-labs】 less53 GET -Blind based -Order By Clause -String -Stacked injection(GET型基于盲注的字符型Order By从句堆叠注入)

    http://192.168.136.128/sqli-labs-master/Less-53/?sort=1';insert into users(id,username,password) val ...