使用JavaScript将div/moving div重新定位到左侧和右侧

我是JavaScript新手，我试图启动一个非常简单的项目，它显示一个可控制的div，可以使用a，w，s，键盘上的d键。我目前在如何移动div方面遇到问题，因为我不知道要更改哪个属性。使用JavaScript将div/moving div重新定位到左侧和右侧

divBar = null; 

function detectKey() { 
    //97 = a 
    //115 = s 
    //100 = d 
    //119 = w 

    if (event.charCode == 97) { 
     //a 
     alert(divBar.position); 
    } 
    if (event.charCode == 115) { 
     //s 
    } 
    if (event.charCode == 100) { 
     //d 
    } 
    if (event.charCode == 119) { 
     //w 
    } 
} 

function createDiv() { 
    divBar = document.createElement("div"); 
    divBar.id = "divBar"; 
    divBar.style.border = "solid 1px #AAAAAA"; 
    divBar.style.backgroundColor = "black"; 
    divBar.style.top = 400; 
    divBar.style.height = "10px"; 
    divBar.style.width = "100px"; 
    divBar.style.position = "absolute"; 
    document.body.appendChild(divBar); 
    document.addEventListener("keypress", detectKey, false); 

}

我不确定把这个条件声明。这样div就会向左，向右，向上和向下移动。

来源

2011-07-10 denniss

如果它绝对定位（它似乎是），那么您可以更改divbar.style.top和divbar.style.left来移动它。

下面是一个工作示例：http://jsfiddle.net/jfriend00/rRbZz/。

来源

2011-07-10 01:05:33 jfriend00

尝试过了，它似乎没有工作=（ – denniss

在这里工作：http://jsfiddle.net/jfriend00/rRbZz/您的代码包含了一些错误，你可以看到在我的jsfiddle固定代码。 – jfriend00

由于它绝对定位，你很可能会想要改变它的顶部/左侧样式属性。它将涉及读取当前的顶部/左侧属性，然后在按下a，w，s，d键之后添加/删除它们，然后再添加该值。因此，对于每个关键/方向，您都必须弄清楚对元素有什么影响。它会向上/向下移动（影响顶部属性）还是向左/向右移动（影响左侧属性）。阅读那里的内容，进行适当的计算，并更新属性。最棘手的部分是读取最初的style.top/style.left属性，但是因为你正在用Javascript设置它们，所以你应该没有问题。

来源

2011-07-10 01:08:42 thescientist

使用JavaScript将div/moving div重新定位到左侧和右侧

回答

相关问题