通过数组来存放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. [Swift通天遁地]四、网络和线程-(2)通过BlockOperation实现线程的队列

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. golang——常用内建函数

    (1)func len(v Type) int 返回长度,取决于具体类型:字符串返回字节数:channel返回缓存元素的个数: (2)func cap(v Type) int 返回容量,取决于具体类型 ...

  3. RocketMQ(1)--helloworld

    双Master方式: 服务器环境 序号 IP 角色 模式 1 192.168.32.135 nameServer1,brokerServer1  Master1 2 192.168.32.136 na ...

  4. DFS之城堡问题

    2019-06-01 17:54:51 坚持!! 题目链接: http://bailian.openjudge.cn/practice/2815 #include <bits/stdc++.h& ...

  5. Hadoop Hive概念学习系列之hive里的HiveQL——查询语言（十五）

    Hive的操作与传统关系型数据库SQL操作十分类似. Hive主要支持以下几类操作: DDL 1.DDL:数据定义语句,包括CREATE.ALTER.SHOW.DESCRIBE.DROP等. 详细点, ...

  6. 为什么选择Sqoop？（三）

    为什么选择 Sqoop? 通常基于三个方面的考虑: 1.它可以高效.可控地利用资源,可以通过调整任务数来控制任务的并发度.另外它还可以配置数据库的访问时间等等. 2.它可以自动的完成数据类型映射与转换 ...

  7. Razor的使用

    Razor可以识别尖括号,且关键词是@,默认情况下会对输出的html代码进行转义 1.C#代码 用 @ 加 中括号 包起来 @{ ; i < ; i++) { <h3>C#语句块要用 ...

  8. MVC系列学习(二)-初步了解ORM框架-EF

    1.新建 一个控制台项目 2.添加一个数据项 a.选择数据库 注:数据库中的表如下: b.选择EF版本 c.选择表 3.初步了解EF框架 看到了多了一个以 edmx后缀的文件 在edmx文件上,右击打 ...

  9. （转）在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...

  10. node.js安装步骤

    首先这是node.js的官网:https://nodejs.org/en/ 截至2017年12月9日,node更新在8.9.3该版本,建议开发人员下载6.0以上版本,8以上不是很稳定!  如果有其他需 ...