Nuevo en javascript , he visto muchos tutoriales diferentes sobre cómo mover divs, pero por alguna razón, nunca funciona, esto es lo que he visto hasta ahora
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 siendo un cuadrado negro 100 x 100 px
1) Puede obtener el elemento HTML pasando el selector de CSS. Si es una id , entonces tiene un prefijo con # , si es clase, entonces prefíjelo con . .
let dodger = document.querySelector('#dodger'); 2) Puede obtener top , left , right , bottom desde getComputedStyle y moverlo
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>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; });