<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
}
#box1 {
position: relative;
left: 50%;
top: 100px;
width: 100px;
height: 100px;
background-color: rgb(90, 224, 96);
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
<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>
</html>
relative定位是相对于父元素body内容定位(不含margin),而offsetTop是包含父元素margin来定位的,而body默认有margin,这样会导致设置left/top会有偏差
解决方案一:将relative改为absolute
解决方案二:使用relative时去掉body的margin就正常了