設置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>

來源

2013-02-23 user1743825

你#movee頂部風格的屬性設置爲字符串「櫃檯」，而不是變量計數器

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

而且似乎您試圖動畫元素的值，你的技術將無法正常工作，將你的腳本運行結束後纔會發生更新。我建議尋找css轉換，或者像jQuery（jQuery.animate）這樣的動畫庫。

來源

2013-02-23 19:27:47 Musa

不是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

來源

2013-02-23 19:27:28 d1mitar

即使您設置頂部樣式的代碼是正確的，您的元素也不會生成動畫，因爲代碼在循環過程中不會將控制權返回給瀏覽器。相反，它會一次移動300個像素。

來源

2013-02-23 19:28:41 Neil

設置HTML元素的垂直位置

回答

相關問題