HTML / CSS / JS：在將元素附加到DOM樹之前是否可以找到元素的大小？

Question

我正在通過JavaScript動態創建一些HTML元素。 有點像這樣：

        var author  = document.createElement("div");
        author.innerHTML = _feed[i].author;
        author.className = "author";

如果元素尚未添加到文檔中，則瀏覽器返回offsetHeight = 0 。

我想在將元素附加到文檔之前知道元素的高度，因為如果元素的結果高度太大，我需要采取一些操作（使其變小），然后才將其添加到文檔中。

Answer 1

我的建議是將它添加到頁面左邊距為-10000或其他東西，這樣它就不可見了。 然后你可以獲得尺寸，做你需要的，然后改變左邊距，使它在你想要的位置。 這是假設您將使用絕對定位。

但據我所知，瀏覽器不會報告不在DOM中的元素的信息。

Answer 2

Dan你將遇到的問題是，除非你把它添加到DOM，否則你永遠無法准確知道它的高度。 原因是由於元素不在DOM中，因此不能受CSS中設置的樣式或瀏覽器默認樣式的影響。 即使元素本身沒有特定的樣式，也可以使用其父元素，甚至可以使用其祖父母元素（我是否只是將祖父母元素組成？）。

獲得高度的唯一准確方法是將元素准確放置在DOM中的位置，然后檢測高度。 我不認為visibility:hidden; 會起作用，因為它周圍的元素仍然會感覺到它的存在（在其他元素周圍增加邊距和定位）。

position:absolute; left: -5000px;如何position:absolute; left: -5000px; position:absolute; left: -5000px; ？ 這可能有用。