如何根據絕對定位的元素高度動態更改邊距

Question

我正在嘗試根據另一個絕對定位圖像的高度動態更改元素的邊距頂部。

在任何人問之前，由於其他原因，它必須絕對定位，所以我不能只是相對。

只有當我輸入諸如“200px”之類的絕對值時，我才能更改邊距。 但是，當我嘗試使用變量動態更改每個 window 調整的邊距頂部時，它根本不給元素任何邊距。

任何幫助都會有所幫助。 先感謝您！

var element;
var textIntro;
var newMargin;

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

Answer 1

希望它會幫助你這個Js：

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>