设置HTML元素的垂直位置

问题描述：

如果我拿出变量计数器并且只设置document.getElementById("movee").style.top等于一个数字，它就可以正常工作。将变量计数器和该位代码结合在一起理论上将得到一个图像移动。不过由于某种原因，它不工作！设置HTML元素的垂直位置

<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顶部风格的属性设置为字符串“柜台”，而不是变量计数器

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

而且似乎您试图动画元素的值，你的技术将无法正常工作，将你的脚本运行结束后才会发生更新。我建议寻找css转换，或者像jQuery（jQuery.animate）这样的动画库。

不是100％肯定的，但是使用setTimeout和curried函数（用于变量范围）允许运行在函数运行时发生？此外，+1建议其他人已经解决了这个问题的地方（jQuery或CSS转换，特别是转换：translate（））。 – MushinNoShin 2013-02-23 19:34:49

setTimeout可以工作，但我预见它会导致更多的问题。 – Musa 2013-02-23 19:38:10

的确如此。 OP应尽可能使用jquery或css，并停止尝试重新发明轮子。 – MushinNoShin 2013-02-23 19:40:46

答

从“计数器”删除引号和该行后不使用“无功反”，只是计数器+ = 1

答

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

设置HTML元素的垂直位置

相关推荐