使用javascript移动div会导致从position：relative到position：static的意外更改

Question

I'm trying to move a div left/down by pressing buttons. 我正在尝试通过按按钮向左/向下移动div。 It causes an unexpected change from position:relative to position:static. 这会导致从position：relative到position：static的意外更改。 An explanation of why this occurs would be great. 解释为什么会发生这种情况会很好。

<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>

I've put the code on JSBin https://jsbin.com/vineqeedit?html,js,console,output in case that's more convenient for anyone who wants to use that. 我将代码放在JSBin https://jsbin.com/vineqeedit?html,js,console,output上，以防任何想使用它的人方便。

Thanks for any help, 谢谢你的帮助，
Gerard 杰拉德

Answer 1

Fixed: 固定：

 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); }

 <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>

Anyway your trouble is because position: relative; 无论如何，你的麻烦是因为position: relative; is set in the element's inline style. 设置为元素的内联样式。 And inside your code you had several places where you set the entire element.style = "string", which replaced the whole inline css with one single style online. 在您的代码中，您有几个地方可以设置整个element.style =“ string”，它用一个在线样式替换了整个内联css。 So I changed it to just change either left or top with element.style.left = newLeft , and that fixes it. 因此，我将其更改为仅使用element.style.left = newLeft更改了left或top，并对其进行了修复。

使用javascript移动div会导致从position：relative到position：static的意外更改

问题描述

1 个解决方案

解决方案1
0 2015-12-10 09:52:39

使用javascript移动div会导致从position：relative到position：static的意外更改

问题描述

1 个解决方案

解决方案1 0 2015-12-10 09:52:39

解决方案1
0 2015-12-10 09:52:39