元素的大小之前它被添加到DOM

如果我們將它添加到DOM之前計算元素的大小，其結果是錯誤的，看到的代碼第三行的位置：元素的大小之前它被添加到DOM

var elt = document.createElement('div'); 
 
elt.innerHTML = "Blah"; 
 
console.log(elt.getBoundingClientRect()); // here : 0, 0, 0, 0, 0, etc. 
 
document.body.appendChild(elt); 
 
console.log(elt.getBoundingClientRect()); // here : 8, 8, 623, 20, 8, 631, 28, 8

如何在將添加到DOM之前計算元素的大小？

來源

2014-10-27 Basj

元素的大小也將取決於大小和樣式的容器。 DOM外部的元素沒有容器，因此沒有可靠的方法來計算其大小而不將其添加到DOM（至少暫時）。 – 2014-10-27 14:16:48

可能的重複[可以jQuery獲取未被繪製的動態元素的大小]（http://stackoverflow.com/questions/11523267/can-jquery-get-the-size-of-a-dynamic-element -that-not-been-drawn） – Tudmotu 2014-10-27 14:17:53

no @Tudmotu，我不想找到一個jQuery解決方案。我使用普通香草JS – Basj 2014-10-27 14:19:23

你不能，因爲視覺大小取決於：

渲染的元素：如果DOM是每個DOM操作後呈現，這將導致大量的內存問題。
元素在文檔中的上下文。如果你沒有把它放在文檔中，我們如何計算文檔中元素的位置？我們如何研究如何應用什麼樣的風格？

來源

2014-10-27 14:20:19 Barney

讓我們假設元素的容器只是一個沒有樣式的空HTML頁面。那麼有沒有解決辦法？ – Basj 2014-10-27 14:22:10

您必須創建一個新文檔並將元素添加到該文檔中才能看到，但與僅僅將元素簡單添加到首次使用的上下文中的文檔相比，這會更加影響性能和可靠性。 – Barney 2014-10-27 14:25:24

所有測試例如Modernizr等都將html附加到頁面上，運行測試然後將其刪除。開銷很小，直到元素在DOM中，它不佔用任何空間。通過實驗，您可以將其附加到DOM並顯示：hidden;所以GFX不會渲染它。那麼你應該可以自由地操作它，而不會影響頁面 – sidonaldson 2014-10-27 14:28:20

添加元素，獲取其邊界並移除。它不會出現在屏幕上。

var elt = document.createElement('div'); 
 
elt.innerHTML = "Blah"; 
 
document.body.appendChild(elt); 
 
var bounds = elt.getBoundingClientRect(); 
 
document.body.removeChild(elt); 
 
document.getElementById("bounds").innerHTML = JSON.stringify(bounds);

<div id="bounds">bounds?</div>

來源

2014-10-27 14:25:39 georg

Thanks @georg。我已經嘗試過了，但問題在於性能。在我的機器上花費大約1毫秒來完成整個事情。對於我所擁有的項目，我需要在數百或數千個元素上執行此操作......所以這會太慢。 [*示例：*如果您點擊http://bigpicture.bi/demo的左上角徽標（sitename），我必須在顯示它們之前計算大量元素的大小] – Basj 2014-10-27 14:38:42

@Basj：看起來有趣，但我不明白爲什麼需要在代碼中預先排版元素大小。也許你可以尋找一種解決方法，不需要這樣做。例如，如果元素的位置取決於其大小，則可以先將其放置在任意位置，然後使其「浮動」到所需的位置。這是更簡單的編程，並將視覺上非常有吸引力！ – georg 2014-10-27 15:07:54

我需要預先計算size @georg的唯一原因是，當我想要找到包含** all **元素的文本的BoundingBox時，則left = element.style.left（easy），但是爲了計算「right」，我需要元素的寬度 – Basj 2014-10-27 22:17:16

元素的大小之前它被添加到DOM

回答

相關問題