如何知道一个Html元素何时准备好(呈现)

Question

我有一些javascript添加一个元素到文档。立即添加后，我试图获得元素的clientWidth和clienttheight。然而，我看到所有与大小相关的属性都为0。但是稍后我注意到size属性确实被填充了实际的大小值(最终)。

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