keyboard Event :Moving div to left with margin-left on pressing key

Question

I would like to move to the left a div when pressing left keybord arrow.

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
}

Here CSS:

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

And HTML:

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

I think The problem is that it don't read the actual value of margin-left.

EDIT: the css style is in an external file

Are errors displayed on the developper console? ( [F12] key on most browsers) — Pascal Goldbach, Jun 10 '16 at 14:24
no error, when pressing key the margin-left became equal to 5px, I would that I will be equal to : actual value + 5px — unfoudev, Jun 10 '16 at 14:26

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Found an answer here : How to get margin value of a div in plain JavaScript?

T.J. Crowder said :

The properties on the style object are only the styles applied directly to the element (e.g., via a style attribute or in code). So .style.marginTop will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).

To get the current calculated style of the object, you use either the currentStyle property (Microsoft) or the getComputedStyle function (pretty much everyone else).

Example:

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

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

To summarize :

document.getElementById("vaisseau").style.marginLeft only works when the HTML code looks like this : <div id="vaisseau" class="elements" style="margin-left: 300px"></div>

keyboard Event :Moving div to left with margin-left on pressing key

1 Answers1