javascript - 如何知道 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/