Tastatur Ereignis: Verschieben div nach links mit margin-left beim Drücken der Taste

Question

Ich möchte nach links ein div verschieben, wenn Sie links Tastaturpfeil drücken.

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 
} 

Hier CSS:

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

Und HTML:

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

Ich denke, das Problem ist, dass es nicht den tatsächlichen Wert von margin-left lesen Sie.

EDIT: Die CSS-Stil ist in einer externen Datei

Answer 1

eine Antwort hier gefunden: How to get margin value of a div in plain JavaScript?

T. J. Crowder sagte:

Die Eigenschaften auf dem Objekt style sind nur die Stile, die direkt auf das Element angewendet werden (z. B. über ein Stilattribut oder im Code). So hat .style.marginTop nur etwas, wenn Sie etwas speziell diesem Element zugewiesen haben (nicht über ein Stylesheet usw. zugewiesen).

Um den aktuellen berechneten Stil des Objekts zu erhalten, verwenden Sie entweder die currentStyle Eigenschaft (Microsoft) oder die getComputedStyle Funktion (so ziemlich alle anderen).

Beispiel:

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

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

Fassen wir zusammen:

document.getElementById("vaisseau").style.marginLeft funktioniert nur, wenn der HTML-Code wie folgt aussieht: <div id="vaisseau" class="elements" style="margin-left: 300px"></div>