zoukankan      html  css  js  c++  java
  • 切换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{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>
  • 相关阅读:
    [CF451E] Devu and Flowers
    [CF1038E] Maximum Matching
    [CF825E] Minimal Labels
    [CCPC2020绵阳L] Lottery
    [CCPC2020绵阳K] Knowledge is Power
    [CCPC2020绵阳J] Joy of Handcraft
    [CCPC2020绵阳G] Game of Cards
    [CCPC2020绵阳D] Defuse the Bombs
    [CF1082E] Increasing Frequency
    [CF301B] Yaroslav and Time
  • 原文地址:https://www.cnblogs.com/webskill/p/4171131.html
Copyright © 2011-2022 走看看