键盘事件:按下左侧边距向左移动div

时间:2016-06-10 13:46:17

标签: javascript css dom

按左键键箭头时,我想向左移动一个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样式位于外部文件

1 个答案:

答案 0 :(得分:1)

在这里找到答案:How to get margin value of a div in plain JavaScript?

T.J。克劳德说:

  

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>