javascript代码的小div为什么向上和向左移动不了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<tbody>
<div style="background-color:black;height:500px;width:600px" >
<div id="mytanke" style="background-color:yellow;width:18px;height:20px;position:relative;"></div>
</div>
</tbody>
<script type="text/javascript">
var mytanke=document.getElementById("mytanke");
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var x=mytanke.offsetLeft;
var y=mytanke.offsetTop;
if(e && e.keyCode==37){ // zuo
mytanke.style.backgroundColor='red';
if(x>8){
mytanke.style.left=(x-1)+'px';
}
}
if(e && e.keyCode==38){ // shang
if(y>8){
var mm=parseInt(y)-1;
mytanke.style.top=mm+'px';
}
}
if(e && e.keyCode==39){ // you
if(x<600){
console.log(3333);
mytanke.style.left=(x+1)+'px';
}
}
if(e && e.keyCode==40){ // xia
console.log(4444);
if(y<500){
mytanke.style.top=(y+1)+'px';
}
}
};
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
亲，你这段代码写得有点问题哦~
你给元素 style 的 left/top/right/bottom 赋值都是根据相关 offsetTop、offsetLeft 来的。offsetLeft 不等于元素 style 的 left，在你举的例子里面，页面 body 默认有 margin: 8px , 初始化的时候小方块的 offsetLeft 就是 8 了。当你按下向右的按钮的时候，赋值style.left = offsetLeft + 1 + 'px'实际上就是style.left = 8 + 1 + 'px'即style.left = '9px'。变更之后 left 为 9px，offsetLeft 为 8 + 9 = 17；此时当你按下向左的按钮的时候是赋值style.left = offsetLeft - 1 + 'px'即style.left = 17 - 1 + 'px'为style.left = '16px'，比之前的 9px 又多了 7px 呢，所以方块继续向右移动了！
主要的原因还是 offsetLeft 不等于元素的 left，这里需要处理下。2019-07-17 19:23:32赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
