<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; } </style> <script> document.onkeydown = function(ev){ var oEvent = ev||event; var oDiv = document.getElementById("div1"); if(oEvent.keyCode == 37) { oDiv.style.left = oDiv.offsetLeft - 10 +"px"; } if(oEvent.keyCode == 39) { oDiv.style.left = oDiv.offsetLeft + 10 +"px"; } if(oEvent.keyCode ==38) { oDiv.style.top = oDiv.offsetTop -10 +"px"; } if(oEvent.keyCode ==40) { oDiv.style.top = oDiv.offsetTop +10 +"px"; } } </script> </head> <body> <div id="div1"></div> </body> </html>