Question

我正在尝试根据另一个绝对定位图像的高度动态更改元素的边距顶部。

在任何人问之前，由于其他原因，它必须绝对定位，所以我不能只是相对。

只有当我输入绝对值（例如“200px”）时，我才能更改边距。但是，当我尝试使用变量动态更改每个窗口调整时的 margin-top 时，它根本不给元素任何边距。

任何帮助都会有所帮助。提前致谢！

var element;
var textIntro;
var newMargin;

function setMargin() {
    element = document.getElementById("cover1");
    newMargin = element.style.height;
    document.getElementById("TextIntro").style.marginTop = newMargin;
}

Answer 1

希望对你有所帮助：

setMargin();

function setMargin() {
    element = document.getElementById("cover");
    newMargin = element.offsetHeight;
    document.getElementById("cover1").style.top = newMargin +"px";
}

演示

var element;
var textIntro;
var newMargin;

setMargin();

function setMargin() {
    element = document.getElementById("cover");
    newMargin = element.offsetHeight;
    document.getElementById("cover1").style.top = newMargin +"px";
}

body{
  margin: 0;
}
body > div {
  position:relative;
  padding:20px;
  height:500px;
  width: 90vw;
  background-color:red;
}
body > div > div {
  position:absolute;
  display:block;
  width:calc(100% - 80px); /* Padding parent + this object */
  margin-top: 20px;
  padding: 0 20px 0 20px;
}
body > div > #cover{
  background-color:green;
  height: 100px;
  top: 0;
}
body > div > #cover1{
  background-color:blue;
  height:200px;
}
body > div > #cover2{
  background-color:orange;
}

<div>
  <div id="cover"></div>
  <div id="cover1"></div>
</div>

如何根据绝对定位的元素高度动态更改边距

1 个答案:

演示