如何知道HTML元素何時准備就緒（呈現）？

Question

我有一些JavaScript，可以向文檔中添加元素。 添加后，我立即嘗試獲取元素的clientWidth和clientHeight。 但是，我看到與大小相關的所有屬性均為0。但是稍后，我注意到大小屬性的確填充了實際大小值（最終）。

我如何知道何時可以為添加的HTML元素使用尺寸詳細信息？ 我試過聽各種事件，例如onload和onreadystatechange。 但是，這些事件似乎僅適用於文檔本身，不適用於單個元素。

非常感謝。

Answer 1

DOM更改被推遲到javascript線程退出之前，因此不起作用：

someNode.addChild(someElem);
w = someElem.clientWidth // 0

您必須啟動一個新線程才能使用新添加的元素：

someNode.addChild(someElem);

setTimeout(function() {
     w = someElem.clientWidth // should work
}, 0)

另外（更好），請嘗試監聽DOM突變事件：

document.body.addEventListener('DOMNodeInserted', function(e) {
    alert('div height=' + e.target.clientHeight)
})

d = document.createElement("div")
d.appendChild(document.createTextNode("hello"))
t = document.body.appendChild(d)

http://jsfiddle.net/rM5cJ/

Answer 2

您可以設置一個初始詞典（可以使用對象常量）—在文檔的第一個開始處進行設置，並且在呈現每個html之后，您可以執行以下操作：

<div id='aaa'> </div>

<Script>myObject.Add('aaa',1,doSomethingLater) </script>

您不能使用onload事件，因為它僅與img / body / iframes有關。

該對象可以如下所示：

myObject =
{
 Add:function (a,b,cb){this[a]=b;cb(a,b)} 

}