允许我使用箭头键控制元素的脚本为什么不起作用？

Question

这是我的代码：

usort($fonts, function($a, $b){return $a['name'] <=> $b['name'];});

当您按向右箭头时，div的位置将移至var div=document.getElementById("myDiv") div.style.backgroundColor="blue"; div.style.display="block"; document.onkeydown=function(r){ switch(r.key){ case "ArrowRight": div.style.position="left:"+100+"px" } } 。

唯一的错误是在我说的第7行：

left:100px

当我用警报命令替换该行时，它起作用了，所以我知道问题出在我试图改变位置的方式上。如何修复我的代码？

Answer 1

而不是div.style.position="left:"+100+"px"，请尝试：

div.style.position="absolute"; // or one of the other css position properties, depending what you want this to be relative to
div.style.left=100+"px";

如果您希望div每次移动100像素，则可以这样做：

var  div=document.getElementById("myDiv")
div.style.backgroundColor="blue";
div.style.display="block";
div.style.position="absolute";
var x = 0;
document.onkeydown=function(r){
    switch(r.key){
        case "ArrowRight":
        x+=100;
        div.style.left=x+"px";
    }
}