Javascript：无法获取新创建元素的高度答案

【问题标题】：Javascript: unable to get height of newly created elementJavascript：无法获取新创建元素的高度
【发布时间】：2011-11-22 02:14:16
【问题描述】：

使用新元素（例如 body.append(html)）更新 DOM 后，我无法立即获取新更新元素的高度（例如 body.height()）。部分修复是设置时间间隔并在时间间隔结束时获取高度 (setTimeout("alert(body.height)", 500))。

有更好的想法吗？就像 DOM 完全更新后的回调一样？谢谢。

编辑：这只发生在后台有很多事情发生时（即页面第一次加载时）。如果没有处理任何其他内容，页面更新似乎几乎是即时的。我需要的是一个回调，或者是 DOM 何时重组的指示器！

编辑：问题在于浏览器被其他进程“分心”，这使得浏览器无法在追加元素后立即更新。我该如何解决这个问题？

【问题讨论】：

您是否会在异步调用中附加 HTML，例如 ajax 查询？
现在很难重现这个问题的严重性

标签： javascript jquery dom

【解决方案1】：

超时方法之所以有效，是因为渲染引擎有机会在那里显示新元素，方法是对其进行更改以渲染它并为其分配高度。

您可以将超时设置为 0，仍然具有相同的效果。

【讨论】：

不，其实是有门槛的。例如，timeout = 500 可能有效，而 200 则无效。
在 firefox、chrome 和 ie 中测试
忽略我关于将超时设置为 0 的评论。其余的仍然适用。
你能想出一个更“精确”的解决方案吗？我可以检测渲染引擎何时处理完新元素的高度吗？

【解决方案2】：

使用 jQuery 为我工作 fine。

在 jsfiddle 演示中我放了下一段代码：

$(function(){
    var jTest = $('#test');

    console.log('The height:',jTest.innerHeight(),jTest.height()); //Show me 'The height: 20 20'

    jTest.append('<div><br/>How are you?</div>');
    console.log('The height:',jTest.innerHeight(),jTest.height()); //Show me 'The height: 60 60'

});

除非您的意思是仅使用 javascript 解决方案或放置一个 jsFiddle 演示来显示您的错误。

【讨论】：

它可以工作，因为没有其他任何处理，所以浏览器几乎立即更新。但是，如果浏览器被其他进程拖慢了，这将不起作用
什么样的流程？如果是ajax，我建议你在请求结束时调用一个函数（使用$.ajax()），否则你可以做一个setTimeOut 来查看进程是否已经结束，然后调用你的函数来查看高度。