html+css+js 更换div位置

前言：
主要用 getComputedStyle() 来获得元素的最终样式，element.style 获得的样式只能是内联样式，像是 style标签内的就取不到。

兼容性：
在 Chrome 和 Firefox 是支持该属性的，同时 IE 9 10 11 也是支持相同的特性的，IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle 这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,这点需要注意。

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" initial-scale="1" charset="utf-8" />
<title>Document</title>
<style>
    .outerBox{
        position:relative;
        left:50%;
        width:900px;
        height:300px;
        margin-left:-450px;
        border:0;
        padding:0;
        background-color:pink;
    }
    .box {
        position:relative;
        width:100%;
        height:21px;
        padding:0;
        margin-top:10px;
        text-align:left;
        border-style:solid;
        border-width:1px;
        transition: top 2s;
        -moz-transition: top 2s;    /* Firefox 4 */
        -webkit-transition: top 2s; /* Safari 和 Chrome */
        -o-transition: top 2s;  /* Opera */
    }
    .box1{
        /* 10px 上间距*/
        top:66px;
        background-color:red;
    }
    .box2{
        /* 10px 21px 2px 上间距 高度 边框宽度 */
        top:-33px; 
        background-color:yellow;
    }
    .box3{
        /* 10px +21px + 2px 上间距 高度 边框宽度 */
        top:-33px; 
        background-color: blue;
    }
</style>
</head>
<body>
    <div class="outerBox">
        <div class ="box box1">我是一号,和原来的三号换了位置,top值=10（margin-top）+2（border-width*2）+21(box.width)）*2px</div>
        <div class ="box box2">我是二号,和原来的一号换了位置，top值=-（10（margin-top）+2（border-width*2）+21(box.width)）px</div>
        <div class ="box box3">我是三号,和原来的二号换了位置，top值=-（10（margin-top）+2（border-width*2）+21(box.width)）px</div>
    </div>
    <div>
        <input type="button" onclick="move(0,0)" value="点我" />
        <input type="button" onclick="move(2,1)" value="点我" />
    </div>
    偏门知识：
    <a href="https://www.runoob.com/w3cnote/window-getcomputedstyle-method.html">window.getComputedStyle() 方法的使用</a>
</body>
<script>
    function move_up(n,el){
        var m = window.getComputedStyle(el).top;
        m = m.replace("px","");
        m = Number(m);
        //console.log(window.getComputedStyle(el).top);
        el.style.top=m + n*-33+'px';
         
    }
    function move_down(n,el){
        var m = window.getComputedStyle(el).top;
        m = m.replace("px","");
        m = Number(m);
        el.style.top=m + n*33+'px';
         
    }
 
    function move(n,m){
        var boxs = document.getElementsByClassName('box');
        //console.log(boxs);
        if(m<1){
            move_up(1,boxs[n]);
        }else{
            //console.log(n);
            move_down(1,boxs[n]);
        }
    }
</script>
 
</html>