Question

我是javascript的新手，我正在尝试启动一个非常简单的项目，即显示一个可控制的div，可以使用键盘上的w，s，d键移动。我目前在如何移动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就会向左，向右，向上和向下移动。

Answer 1

如果它位于绝对位置（看起来是这样），那么你可以改变divbar.style.top和divbar.style.left来移动它。

以下是一个有效的例子：http://jsfiddle.net/jfriend00/rRbZz/。

Answer 2

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

用JavaScript重新定位div / moving div左右两侧

2 个答案: