键盘事件：将div向左移动，按下键时向左移

Question

我想在按左键盘箭头时向左移动div。

function arrowright (event){
    var vaiss= document.getElementById("vaisseau");
    var size= vaiss.style.marginLeft;
    alert(size); //here I get empty message
    if (event.which==39)
        vaiss.style.marginLeft=size+"5px";
    alert (vaiss.style.marginLeft); // here I get 5px not previous left margin + 5px
}

这里的CSS：

#vaisseau{
    bottom:0;
    position:absolute;
    margin-left:300px;
    display;block;
}

和HTML：

div id="vaisseau" class="elements"><img src="vaisseau.jpg"></div>

我认为问题在于它没有读取margin-left的实际值。

编辑：CSS样式在外部文件中

Answer 1

在这里找到答案： 如何在普通JavaScript中获取div的保证金值？

TJ Crowder说：

style对象上的属性仅是直接应用于元素的样式（例如，通过样式属性或代码）。 因此， .style.marginTop仅在您有专门分配给该元素的内容（未通过样式表等分配）时才包含。

要获取对象的当前计算样式，可以使用currentStyle属性（Microsoft）或getComputedStyle函数（几乎所有人）。

例：

var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);

display("Current marginTop: " + style.marginTop);

总结一下：

document.getElementById("vaisseau").style.marginLeft仅在HTML代码如下所示时起作用： <div id="vaisseau" class="elements" style="margin-left: 300px"></div>