Question

我有两个div如下：

HTML：

<body>
<div id="container">
    <div id="health"></div>
    <div id="food"></div>
    <button id="click" onClick="position();">sdcasdfzsdvv</button>
</div>
</body>

CSS：

@charset "utf-8";
*{
    padding:0px;
    margin:0px;}

body{
    background-color:#F4F4F2;
    margin-top:15px;}

#container{
    width:270px;
    height:162px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:fix;}

#health{
    height:80px;
    margin-bottom:0px;
    border: solid 1px red;
    background-color:green;}

#food{
    height:80px;
    margin-bottom:0px;
    border: solid 1px blue;
    background-color:yellow;}

button{
    width:100px;
    height:80px;}

我希望在JavaScript中有一个函数来移动这两个div，一旦黄色在顶部和绿色底部，点击按钮，绿色向上移动，黄色向下移动，反之亦然。

但在第一次试用中，下面的代码不起作用。我不知道如何在不使用jQuery的情况下改变这些div的位置而不将它们的位置改为绝对和相对。如果你能给予帮助，我将不胜感激。

function position() {
    document.getElementById('health').style.top='80px';
    document.getElementById('food').style.top='0px';
}

Answer 1

您必须将position:absolute添加到div中您必须在Javascript中添加“之前和之后的数字。

Answer 2

仅使用JS：

<body>
<div id="container">
    <div id="health" class="top-div"></div>
    <div id="food" class="bottom-div"></div>
    <button id="click" onClick="position()">sdcasdfzsdvv</button>
</div>

<script>
function position() {
    var topdiv = document.getElementsByClassName("top-div")[0];
    var bottomdiv = document.getElementsByClassName("bottom-div")[0];
    topdiv.parentNode.insertBefore(bottomdiv,topdiv);
    topdiv.className = 'bottom-div';
    bottomdiv.className = 'top-div';
}
</script>

</body>

小提琴：http://jsfiddle.net/rpopanrp/

Answer 3

尝试：

function position() {
    document.getElementById('health').style.marginTop="80px";
    document.getElementById('food').style.marginTop="0px";
}

Answer 4

尝试下面的代码也有变化的解释。

#container{
    width:270px;
    height:162px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:relative; //says the child will be relative to that not body
}

#health{
    height:80px;
    border: solid 1px red;
    background-color:green;
    position:absolute; // the positining for that by the top and left not flow position defalt is top:0 left 0
}

function position() {
    document.getElementById('health').style.top="80px";
}

只需实现你想要的其他div。这应该有效。

Answer 5

这对你有用吗？如果没有，请尝试更具体。 FIDDLE

function position() {
    var container = document.getElementById("container");
    var divs = container.getElementsByTagName("div");
    container.insertBefore(divs[1], divs[0]);
}

Answer 6

http://jsfiddle.net/45zkgk57/6/

JS：

    click=1;
function position() {
    if(click==1) {
    document.getElementById('health').style.top='80px';
    document.getElementById('food').style.top='0px';
        click=2;
    }

    else {
            document.getElementById('health').style.top='0px';
    document.getElementById('food').style.top='80px';
        click=1;
    }
}

另外，css几乎没有变化，检查小提琴。（设置位置：绝对元素）

用javascript移动div

6 个答案: