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>