Question

如果我取出变量计数器并将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>

Answer 1

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

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

此外，您似乎正在尝试为元素设置动画，您的技术将无法正常工作，因为只有在脚本完成运行后才会进行更新。我建议研究css过渡，或者像jQuery（jQuery.animate）那样做动画的库。

Answer 2

从＆＃34; counter＆＃34;删除引号并且在该行之后不使用＆＃34; var counter＆＃34;，只需计数器+ = 1

Answer 3

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

设置HTML元素的垂直位置

3 个答案: