跪求方法！<a>如何实现点击一次更换div大小，再次点击再次改变大小，第三次点击还原原始状态！

js

解决方案 »

  1.   

    新手js哈。
      如果是我 我是怎么实现的
     var tag = 1;
      function changeDivSize(){
        if(tag == 1){
            //修改div大小1
           tag =2;
        }if(tag == 2){
           //修改div大小2
           tag  =3;
       }if(tag==3){
          //div 还原原来大小
       tag =1;
    }
    }
      

  2.   


      <div id="d" style="background: #F00;width: 100px;height: 100px;"></div>
      <a id="a" href="#">点击</a>
      <script>
        var a=document.getElementById('a');
        var d=document.getElementById('d');
        var i=0;
        a.onclick=function(){
          i++;
          switch(i%3){
            case 1:d.style.width='200px';brack;
            case 2:d.style.height='200px';brack;
            case 0:d.style.width=d.style.height='100px';brack;
          }
          return false;
        }
      </script>
      

  3.   

    如果我改变所有div大小呢，把byId改成byTagName吗
      

  4.   

    点击查看在线演示
    使用原生js，如果使用jQuery的话，可以有更多的特效function $(id){
        return document.getElementById(id);
    }
    $('btn').onclick = (function(){
        var box = $('box');
        var w = box.offsetWidth;
        var h = box.offsetHeight;
        var c = 0;
        return function(){
            ++c;
            console.log(w + '=>' + h);
            console.log(box.offsetWidth + ':' + box.offsetHeight);
            console.log(c);
            nw = Math.random() * 500;
            nh = Math.random() * 400;
            $('box').style.width = nw + 'px';
            $('box').style.height = nh + 'px';
            if (c % 3 == 0) {
                $('box').style.width = w + 'px';
                $('box').style.height = h + 'px';
                c = 0;
            }
        }
    })()
      

  5.   

    byTagName遍历，还要事先记录宽高
      

  6.   

    <!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>
    .div1{ border:#FF0000 1px solid; margin-top:5px; width:100px; height:100px;}
    .div2{ border:#00FF00 1px solid; margin-top:5px; width:200px; height:200px;}
    .div3{ border:#0000FF 1px solid; margin-top:5px; width:300px; height:300px;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
    var w_h=new Array();
    var i=1;
    $("a").click(function(e) {
    $("div").each(function(index, ele) {
    if(i==1){
      w_h[index]=$(this).width()+','+$(this).height();
    }
    $(this).width(Math.ceil(Math.random()*100));
    $(this).height(Math.ceil(Math.random()*100));
    });
    if(i==3){
    $("div").each(function(index, ele) {
    var wh=w_h[index].split(',');
            $(this).width(wh[0]);
    $(this).height(wh[1]);
    });
    i=1;
    return;
    }
    ++i;
        });
    })
    </script>
    </head>
    <body>
    <a href="javascript:void(0)"><h1>不要客气鼠标猛击</h1></a>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div></body>
    </html>