设置HTML元素的垂直位置

Set vertical position of HTML element

本文关键字：垂直 位置 元素 HTML 设置      更新时间：2023-09-26

如果我去掉变量计数器，只将document.getElementById("movee").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>

您将#movee的顶部样式属性设置为字符串"counter"，而不是变量计数器的值

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

此外，您似乎正在尝试为元素设置动画，您的技术将不起作用，因为只有在脚本完成运行后才会进行更新。我建议研究css转换，或者像jQuery(jQuery.animate(这样做动画的库。

从"counter"中删除引号，在这一行之后不要使用"var counter"，只使用counter+=1

即使设置顶部样式的代码是正确的，元素也不会动画化，因为代码在循环过程中不会将控制权返回给浏览器。相反，它看起来会同时移动所有300个像素。

相关文章：