使用箭頭鍵移動元素

Question

function docReady()
{
    image = document.getElementById("someImage");
    window.addEventListener("keydown", moveImage);
}

function moveImage(e)
{
    if (e.keyCode == 37)
        image.style.left = parseInt(image.style.left) - 5 + 'px';

    if (e.keyCode == 38)
        image.style.top = parseInt(image.style.top) - 5 + 'px';

    if (e.keyCode == 39)
        image.style.left = parseInt(image.style.left) + 5 + 'px';

    if (e.keyCode == 40)
        image.style.top = parseInt(image.style.top) + 5 + 'px';

    console.log(image.style.left + ', ' + image.style.top);
}

所以上面的代碼應該可以移動圖像。 但事實並非如此。 控制台返回image.style.left和image.style.top空白。 你可以幫我解決這個問題嗎？

PS如果你會如此善良，你是否也可以這樣做，如果圖像在屏幕邊框上它會停止移動？ 非常感謝！

Answer 1

你確實錯過了一些步驟。

確切地說，你應該：

• 在函數外創建變量image （即聲明它是全局的）
• 設置top ， left的初始值
• 將元素的位置設置為absolute 。 默認值是static ，它不支持使用上/左/右/下移動/樣式。
• 在頁面加載時調用整個事物

以下是您按照上述步驟后獲得的內容：

 window.onload = docReady; var image; function docReady() { image = document.getElementById("someImage"); window.addEventListener("keydown", moveImage); image.style.left = 0; image.style.top = 0; } function moveImage(e) { if (e.keyCode == 37) image.style.left = parseInt(image.style.left) - 5 + 'px'; if (e.keyCode == 38) image.style.top = parseInt(image.style.top) - 5 + 'px'; if (e.keyCode == 39) image.style.left = parseInt(image.style.left) + 5 + 'px'; if (e.keyCode == 40) image.style.top = parseInt(image.style.top) + 5 + 'px'; console.log(image.style.left + ', ' + image.style.top); } 

 #someImage{ position:absolute; } 

 <div id = "someImage"> not an image but a test </div> 

（為簡單起見，我使用純文本元素而不是圖像，但這無關緊要）