首頁(yè) 猿問可以用JS移動(dòng)div嗎？

可以用JS移動(dòng)div嗎？

Html5

炎炎設(shè)計(jì) 2023-10-24 21:38:28

我正在嘗試學(xué)習(xí)游戲制作的絕對(duì)基礎(chǔ)知識(shí)，我想知道為什么我可以移動(dòng) img 而不能移動(dòng) 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)在，如果我有一個(gè) id 為 char 的 img 標(biāo)簽，我可以用箭頭鍵移動(dòng)它。<img src="" id="char">但如果我刪除該圖像并用 div 替換它，<div id="char"></div>它不允許我移動(dòng)它。

查看完整描述

1 回答

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

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

為此，需要完成以下幾件事：

確保目標(biāo)元素的 CSS 已position: absolute設(shè)置屬性。您也可以根據(jù)需要使用relative,fixed或。sticky
使用getComputedStyle而不是style直接訪問。該屬性將僅包含由屬性或?qū)傩栽O(shè)置的style值。
附加一個(gè)測(cè)量單位，就像"px"解析的數(shù)字一樣。

這是一個(gè)最小的完整示例：

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è)計(jì)應(yīng)該會(huì)給您一種反模式的印象，因?yàn)樗蛄谢头葱蛄谢?DOM 元素中的屬性。對(duì)于創(chuàng)建良好的老式數(shù)據(jù)結(jié)構(gòu)來(lái)說，這是一個(gè)糟糕的替代品，例如：

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

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

反對(duì) 回復(fù) 2023-10-24