Javascript 设置HTML元素的垂直位置_Javascript_Html

Javascript 设置HTML元素的垂直位置

javascript html

Javascript 设置HTML元素的垂直位置,javascript,html,Javascript,Html,如果我取出变量计数器并将document.getElementByIdmovee.style.top设置为一个数字，它就可以正常工作。理论上，将可变计数器和该位代码结合起来可以使图像移动。但是它不起作用是有原因的 <html> <style type="text/css"> #movee { position:absolute; } </style> <script type="text/javascript"&

如果我取出变量计数器并将document.getElementByIdmovee.style.top设置为一个数字，它就可以正常工作。理论上，将可变计数器和该位代码结合起来可以使图像移动。但是它不起作用是有原因的

<html>
<style type="text/css">
    #movee
    {
        position:absolute;
    }
</style>

<script type="text/javascript">
    function goDown()
    {
        var counter=1; 
        while (counter<300)
        {
            document.getElementById("movee").style.top="counter";
            var counter=counter+1;
        }
    }
</script>

<input type="button" onclick="goDown()" value="Move!">
<img src="test.png" id="movee"></img>
</html>

从计数器中删除引号，该行之后不使用var计数器，仅计数器+=1

您正在将movee的top style属性设置为字符串计数器，而不是变量计数器的值

document.getElementById("movee").style.top=counter+"px";

此外，似乎您正在尝试为元素设置动画，但您的技术将无法工作，因为只有在脚本完成运行后才会进行更新。我建议查看css转换，或者查看一个像jQueryjQuery.animate这样的动画库。

您正在将movee的top style属性设置为字符串计数器，而不是变量计数器的值

document.getElementById("movee").style.top=counter+"px";

此外，似乎您正在尝试为元素设置动画，但您的技术将无法工作，因为只有在脚本完成运行后才会进行更新。我建议查看css转换，或者一个像jQueryjQuery.animate这样的动画库。

即使设置顶级样式的代码是正确的，元素也不会动画，因为代码在循环期间不会将控制权返回到浏览器。相反，它似乎一次移动了所有300个像素。

即使设置顶部样式的代码正确，元素也不会动画，因为代码在循环期间不会将控制权返回到浏览器。相反，它似乎会一次移动所有300像素。

对此不是100%确定，但使用setTimeout和用于变量范围的curried函数是否会允许在函数运行时移动？另外，+1用于建议其他人已经解决这个问题的地方，jquery或css转换，特别是transition:translate.setTimeout可以工作，但我预见它会导致op出现更多问题。确实如此。OP应该尽可能使用jquery或css，并且停止尝试重新发明轮子。谢谢，是的，我将使用jquery。对此不是100%确定，但是使用setTimeout和curried函数进行变量范围划分会允许在函数运行时进行移动吗？另外，+1用于建议其他人已经解决这个问题的地方，jquery或css转换，特别是transition:translate.setTimeout可以工作，但我预见它会导致op出现更多问题。确实如此。OP应该尽可能使用jquery或css，不要再尝试重新发明轮子了。谢谢你，是的，我会改用jquery。