Question

我试图通过按下按钮向左/向下移动div。它会导致位置发生意外变化：相对于position：static。解释为什么会发生这种情况会很棒。

<html>
<body style='border: solid blue 1px; height: 90px'>
<div style='width:900px; height: 80px; position:relative; border: solid green 1px'>
<div id='test' style='position:relative; left:500px; top:0px; border: solid red 2px; width:300px'>
<button id='L' onclick='theButton(this)'>move left</button>
<button id='R' onclick='theButton(this)'>reset</button>
<button id='T' onclick='theButton(this)'>move down</button>
</div>
</div>
<script>

function theButton(x) {
    console.log("x: " + x);
    var aDiv = document.getElementById('test');

    var topPosition = window.getComputedStyle(aDiv).top;  
    console.log(topPosition);
    var topPositionDigitString = topPosition.slice(0,topPosition.length-2); // this strips "px" from the string
    var topPositionNumber = parseInt(topPositionDigitString); // this converts to the numeric we need   

    //var leftPosition = window.getComputedStyle(aDiv).left;
    var leftPosition = aDiv.style.left;
    console.log( leftPosition);
    var leftPositionDigitString = leftPosition.slice(0,leftPosition.length-2);
    var leftPositionNumber = parseInt(leftPositionDigitString);
    console.log("leftPositionNumber: " + leftPositionNumber);

    if(x.id=='L') {
        leftPositionNumber += 50; 
        console.log("leftPositionNumber: " + leftPositionNumber);
        var setleftPosition = 'left:' + leftPositionNumber + 'px';
        aDiv.style = setleftPosition;
        console.log("getComputedStyle(aDiv).left: " + window.getComputedStyle(aDiv).left);
        console.log("aDiv.style.left: " + aDiv.style.left);
    }
    if(x.id=='R') {
        aDiv.style = 'left:0px';
    }
    if(x.id=='T') {
        topPositionNumber += 50;
        var setTopPosition = 'top:' + topPositionNumber + 'px';
        aDiv.style = setTopPosition;
    }
    console.log("x: " + x);
    console.log("topPosition:" + topPosition);
    console.log("getComputedStyle(aDiv).left: " + window.getComputedStyle(aDiv).left);
    console.log("getComputedStyle(aDiv).position: " + window.getComputedStyle(aDiv).position);
}
</script>
</body>
</html>

我已经开启了代码 JSBin https://jsbin.com/vineqeedit?html,js,console,output 如果对于想要使用它的人来说更方便。

感谢您的帮助，
杰拉德

Answer 1

修正：

＆＃13;

function theButton(x) {
  console.log("x: " + x);
  var aDiv = document.getElementById('test');

  var topPosition = window.getComputedStyle(aDiv).top;
  console.log(topPosition);
  var topPositionDigitString = topPosition.slice(0, topPosition.length - 2); // this strips "px" from the string
  var topPositionNumber = parseInt(topPositionDigitString); // this converts to the numeric we need	

  //var leftPosition = window.getComputedStyle(aDiv).left;
  var leftPosition = aDiv.style.left;
  console.log(leftPosition);
  var leftPositionDigitString = leftPosition.slice(0, leftPosition.length - 2);
  var leftPositionNumber = parseInt(leftPositionDigitString);
  console.log("leftPositionNumber: " + leftPositionNumber);

  if (x.id == 'L') {
    leftPositionNumber -= 50;
    console.log("leftPositionNumber: " + leftPositionNumber);
    var setleftPosition = leftPositionNumber + 'px';
    aDiv.style.left = setleftPosition;
    console.log("getComputedStyle(aDiv).left: " + window.getComputedStyle(aDiv).left);
    console.log("aDiv.style.left: " + aDiv.style.left);
  }
  if (x.id == 'R') {
    aDiv.style.left = '500px';
    aDiv.style.top = '0px';
  }
  if (x.id == 'T') {
    topPositionNumber += 50;
    var setTopPosition = topPositionNumber + 'px';
    aDiv.style.top = setTopPosition;
  }
  console.log("x: " + x);
  console.log("topPosition:" + topPosition);
  console.log("getComputedStyle(aDiv).left: " + window.getComputedStyle(aDiv).left);
  console.log("getComputedStyle(aDiv).position: " + window.getComputedStyle(aDiv).position);
}

＆＃13;

<body style='border: solid blue 1px; height: 90px'>
  <div style='width:900px; height: 80px; position:relative; border: solid green 1px'>
    <div id='test' style='position:relative; left:500px; top:0px; border: solid red 2px; width:300px'>
      <button id='L' onclick='theButton(this)'>move left</button>
      <button id='R' onclick='theButton(this)'>reset</button>
      <button id='T' onclick='theButton(this)'>move down</button>
    </div>
  </div>
  <script></script>
</body>

＆＃13;

无论如何，你的麻烦是因为position: relative;是在元素的内联样式中设置的。在你的代码中你有几个地方你设置了整个元素.style =＆＃34; string＆＃34 ;,它用一个单一的在线样式取代了整个内联css。因此，我将其更改为仅使用element.style.left = newLeft更改左侧或顶部，并修复它。

使用javascript移动div会导致从位置意外更改：相对于position：static

1 个答案: