87,909
社区成员
发帖
与我相关
我的任务
分享javascript keydown的一个小问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#box{ width: 100px; height: 100px; background: red; position: absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var i=0;
document.addEventListener('keydown',function(e){
console.log(e.keyCode);
if(e.keyCode==40){
i++;
box.style.top=i+'px';
}
else if(e.keyCode==39){
i++;
box.style.left=i+'px';
}
else if(e.keyCode==38){
i++;
box.style.bottom=i+'px';
}
if(e.keyCode==37){
i++;
box.style.right=i+'px';
}
/*为什么这里的bottom 和right毫无作用呢？*/
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#box{ width: 100px; height: 100px; background: red; position: absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var i=0;
document.addEventListener('keydown',function(e){
console.log(e.keyCode);
if(e.keyCode==40){
i++;
box.style.top=i+'px';
}
else if(e.keyCode==39){
i++;
box.style.left=i+'px';
}
else if(e.keyCode==38){
i++;
box.style.bottom=i+'px';
}
if(e.keyCode==37){
i++;
box.style.right=i+'px';
}
/*为什么这里的bottom 和right毫无作用呢？*/
})
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-06-15
- 打赏
- 举报
只有 width:为 auto;时才能同时设置 left 和 right
当 width:不为 auto;时设置 left 后。right不起作用。不设置 left时。right才起作用。
你打开页面后，不按右键，先按左键试试
