Question

我想用javascript移动div。这是我的代码。

<body>
<input type="button" value="move right" onclick="moveRight()" />
<input type="button" value="move left" onclick="moveLeft()" />
<input type="button" value="move top" onclick="moveTop()" />
<input type="button" value="move bottom" onclick="moveBottom()" />
<div id="textDiv" style="position:relative;top:0;left:0">
my text        
</div>
</body>

我的javascript代码是

function moveRight()
{
    var elem = document.getElementById("textDiv");
    var timer;
    timer = setInterval(function(){move(timer,elem,"top")},100);
}

function move(timer,elem,direction)
{
    alert(elem.offsetLeft);
    if(direction == "top" && elem.offsetLeft < 400)
    {
        elem.offsetLeft = elem.offsetLeft + 10 + "px";
        alert("offsetLeft is "+elem.offsetLeft);
    }
    else
    {
        clearInterval(timer);
    }
}

这里第一个警报显示8px，第二个警报也显示相同。如何移动我的div？

Answer 1

使用position:absolute并更改elem.style.top（Y轴）或elem.style.left（X轴）

Answer 2

由于您已将其设为position:relative，因此您需要使用elem.style.marginLeft代替elem.offsetLeft。或者，如果您不希望其旁边的元素移动，您可以将位置设置为绝对或固定。

Answer 3

你要修改offsetLeft的值Readonly并且你不能改变它的值。或者你可以改变`leftmargin＆＃39;的值。让它移动。

使用marginLeft检查这个小提琴。这只是您如何使用它的示例。每次按moveleft都会增加leftmergin https://jsfiddle.net/eds9yfsq/6/

<script>

    function moveRight()
{
    var elem = document.getElementById("textDiv");
    var left = elem.offsetLeft;
    var timer;
    move(timer,elem,"top", left);


}

function move(timer,elem,direction,left)
{


    if(direction == "top" && left  < 400)
    {
        elem.style.marginLeft  = left + 10 + "px"

    }
    else
    {
        clearInterval(timer);
    }
}

</script>

<input type="button" value="move right" onclick="moveRight()" />
<input type="button" value="move left" onclick="moveLeft()" />
<input type="button" value="move top" onclick="moveTop()" />
<input type="button" value="move bottom" onclick="moveBottom()" />
<div id="textDiv" style="position:relative;top:0;left:0">
my text        
</div>

有关详细信息，请参阅文档。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

用javascript移动div

3 个答案: