我正在尝试通过按下按钮向左/向下移动一个 div。它会导致从 position:relative 到 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 以防任何想要使用它的人更方便。
感谢您的帮助，
杰拉德
最佳答案
固定:
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>无论如何，您的麻烦是因为 position: relative; 是在元素的内联样式中设置的。在你的代码中，你有几个地方可以设置整个 element.style = "string"，它用一种在线样式替换了整个内联 css。所以我将其更改为仅使用 element.style.left = newLeft 更改左侧或顶部，然后修复了它。
关于javascript - 使用 javascript 移动 div 会导致位置 :relative to position:static 发生意外更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34198119/