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;
}
});
道奇是一個黑色方塊 100 x 100 px
uj5u.com熱心網友回復：
1)您可以通過傳遞 CSS 選擇器來獲取 HTML 元素，如果它是 anid則您將其前綴為#，如果 class 則將其前綴為.。
let dodger = document.querySelector('#dodger');
2)你可以得到top, left, right, bottomfromgetComputedStyle并移動它
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>uj5u.com熱心網友回復：
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;
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360722.html
標籤：javascript
上一篇：在按鈕懸停時回應子項的更改文本