首頁猿問你能用JS移動一個div嗎？

你能用JS移動一個div嗎？

JavaScript

慕森卡 2022-06-09 16:22:16

我正在嘗試學(xué)習(xí)游戲制作的絕對基礎(chǔ)知識，我想知道為什么我可以移動 img 而不是 div 元素。JS：var element;function moveSelection(evt) { element = document.getElementById("char"); switch (evt.keyCode) { case 37: element.style.left = parseInt(element.style.left) - 10; break; case 39: element.style.left = parseInt(element.style.left) + 10; break; case 38: element.style.top = parseInt(element.style.top) - 10; break; case 40: element.style.top = parseInt(element.style.top) + 10; break; }}window.addEventListener('keydown', moveSelection);現(xiàn)在，如果我有一個 id 為 char 的 img 標(biāo)簽，我可以用箭頭鍵移動它。<img src="" id="char">但是，如果我刪除該圖像并用 div 替換它，<div id="char"></div>它不讓我移動它。

查看完整描述

1 回答

藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗獲得超7個贊

代碼存在多個問題，我不確定它如何處理圖像。

為此，需要做一些事情：

確保目標(biāo)元素的 CSS 具有position: absolute屬性集。您也可以使用relative,fixed或sticky視需要而定。
使用getComputedStyle而不是直接訪問style。該style屬性將僅包含由屬性或?qū)傩栽O(shè)置的值。
"px"在解析后的數(shù)字上附加一個測量單位。

這是一個最小的完整示例：

const element = document.getElementById("char");

const charStyle = getComputedStyle(element);

function moveSelection(evt) {

evt.preventDefault();

switch (evt.keyCode) {

case 37:

element.style.left = parseInt(charStyle.left) - 10 + "px";

break;

case 39:

element.style.left = parseInt(charStyle.left) + 10 + "px";

break;

case 38:

element.style.top = parseInt(charStyle.top) - 10 + "px";

break;

case 40:

element.style.top = parseInt(charStyle.top) + 10 + "px";

break;

}

document.addEventListener("keydown", moveSelection);

#char {

width: 50px;

height: 50px;

background: red;

position: absolute;

}

話雖如此，這種設(shè)計應(yīng)該讓你覺得是一種反模式，因為它序列化和反序列化來自 DOM 元素的屬性。這是創(chuàng)建良好的老式數(shù)據(jù)結(jié)構(gòu)的不良替代品，例如：

const character = {x: 0, y: 0, stepSize: 10 /*... more properties ...*/};

此外，讓鍵盤直接觸發(fā)角色的移動會導(dǎo)致尷尬的重新觸發(fā)和通常不可靠的用戶體驗。requestAnimationFrame對于這種情況，最好使用動畫循環(huán)。鍵盤處理程序?qū)槊總€鍵打開和關(guān)閉標(biāo)志，但實際上不會直接更新任何內(nèi)容。動畫循環(huán)將平滑地處理重新定位。您的 JS 腳本將保持游戲/動畫狀態(tài)，并僅在渲染幀時將其作為解耦視圖轉(zhuǎn)儲到 DOM。這樣，數(shù)據(jù)流向一個方向，您的應(yīng)用程序?qū)⒏子诰帉懞途S護(hù)。

反對回復(fù) 2022-06-09