将JavaScript变量设置为边距

Question

How do I make the left margin a variable so that I can make it change dynamically on the keydown of the arrows

I'm trying to make the div called tank move.

Code:

function moveTank() {
  var tank = document.getElementById("tank");
  var tankLeft = tank.style.margin-left;    
}

moveTank();

Answer 1

var tankLeft = tank.style.marginLeft;

Note: It will work only for inline specified margin - <img id="tank" src="..." style="margin-left:10px">

And why not to use position:absolute with left and top for your tank sprite?

<div id="tankfield" style="position:relative">
  <img id="tank" src="..." style="position:absolute;left:0px;top:0px">
</div>
<script>
  var tankX=0, tankY=0;
  function placeTank() {
    var tank = document.getElementById("tank");
    tank.style.left = tankX+'px';
    tank.style.top  = tankY+'px';
  }
  // ...
  function tankDown() {
    tankY += 5;
    placeTank();
  }
  // ...
</script>

Answer 2

Hyphenated style attributes get camelCased in js, so you want tank.style.marginLeft .

Also note that 1) That method will only read style attributes set directly on the element, not those in a stylesheet, and 2) it will be a string, either "" or else something like "123px"

Answer 3

why are you using margin? just move the tank with left/top position:

try tank.css({left: "-=10px"});