如何使用 Javascript 進行 div 移動？

Question

javascript 的新手我已經看過很多關於如何移動 div 的不同教程，但由於某種原因，它從來沒有用過，這是我到目前為止所看到的

let dodger = document.querySelector('dodger');
let moveBy = 10;
windows.addEventListener('load',() =>{
    dodger.style.position = 'absolue';
    dodger.style.left = 0;
    dodger.style.top = 0;
} )
window.addEventListener('keyup', (e) => {
    switch (e.key) {
        case 'ArrowLeft':
            dodger.style.left = parseInt(dodger.style.left) - moveBy + 'px';
            break;
        case 'ArrowRight':
            dodger.style.left = parseInt(dodger.style.left) + moveBy + 'px';
            
            break;
        case 'ArrowUp':
            dodger.style.top = parseInt(dodger.style.top) - moveBy + 'px';
            break;
        case 'ArrowDown':
            dodger.style.top = parseInt(dodger.style.top) + moveBy + 'px';
            break;
    }
});

dodger 是一個黑色正方形 100 x 100 px

Answer 1

1）您可以通過傳遞 CSS 選擇器來獲取 HTML 元素，如果它是一個id ，那么你有前綴# ，如果 class 前綴它. .

let dodger = document.querySelector('#dodger');

2）您可以從getComputedStyle獲取top ， left ， right ， bottom並移動它

 let dodger = document.querySelector('#dodger'); let moveBy = 10; window.addEventListener('keyup', (e) => { const styles = getComputedStyle(dodger); switch (e.key) { case 'ArrowLeft': dodger.style.left = parseInt(styles.left) - moveBy + 'px'; break; case 'ArrowRight': dodger.style.left = parseInt(styles.left) + moveBy + 'px'; break; case 'ArrowUp': dodger.style.top = parseInt(styles.top) - moveBy + 'px'; break; case 'ArrowDown': dodger.style.top = parseInt(styles.top) + moveBy + 'px'; break; } });

 #dodger { height: 100px; width: 100px; background-color: red; position: absolute; left: 0; top: 0; }

 <div id="dodger"></div>

Answer 2

window.addEventListener('keyup', (e) => {
const dodger = document.querySelector('#dodger');
const move = {
    ArrowLeft: {left: -1, top: 0},
    ArrowRight: {left: 1, top: 0},
    ArrowUp: {left: 0, top: -1},
    ArrowDown: {left: 0, top: 1},
  };
  const coords = dodger.getBoundingClientRect();
  const moveBy = 100;
  dodger.style.left = (move[e.key].left * moveBy) + coords.left;
  dodger.style.top = (move[e.key].top * moveBy) + coords.top;
});