如何知道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)} 

}