將JavaScript變量設置為邊距

Question

如何使左邊距成為變量，以便可以在箭頭的鍵按下時對其進行動態更改

我正在嘗試使稱為tank的div移動。

碼：

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

moveTank();

Answer 1

var tankLeft = tank.style.marginLeft;

注意：僅適用於行內指定的邊距- <img id="tank" src="..." style="margin-left:10px">

為何不為您的坦克精靈使用position:absolute和left和top ？

<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

連字符的樣式屬性在js中獲得camelCased，因此您需要tank.style.marginLeft 。

另請注意，1）該方法將只讀取直接在元素上設置的樣式屬性，而不能讀取樣式表中的樣式屬性； 2）將是字符串，可以是“”或“ 123px”之類的字符串

Answer 3

你為什么要使用保證金？ 只需以左/上位置移動水箱即可：

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