<style>
#box1 {
position: relative;
left: 50%;
top: 100px;
width: 100px;
height: 100px;
background-color: rgb(90, 224, 96);
}
</style>
```html
<body>
<div id="box1"></div>
</body>
```javascript
<script>
let box = document.querySelector('#box1');
document.addEventListener('keydown', function (e) {
// 上移动
if (e.keyCode === 38) {
box.style.top = box.offsetTop - 1 + 'px';
}
// 下移动
if (e.keyCode === 40) {
box.style.top = box.offsetTop + 1 + 'px';
}
// 左移动
// console.log('左', e.keyCode);
if (e.keyCode === 37) {
box.style.left = box.offsetLeft - 1 + 'px';
}
// 右移动
if (e.keyCode === 39) {
box.style.left = box.offsetLeft + 1 + 'px';
}
});
</script>
数值为10的时候offset显示距离不是以10为步长开始移动,然而当把数值改为1的时候上下移动都会往下,左右移动都会往右移动.求解各位大神,是不是有什么机制我给漏掉了~~
