如何获取自页面加载以来更改的 div 的当前高度？答案

【问题标题】：How do I get the CURRENT height of a div that changed since the page loaded?如何获取自页面加载以来更改的 div 的当前高度？
【发布时间】：2012-08-20 05:59:36
【问题描述】：

我想要什么

根据 CURRENT 内容确定准确的 .results div 的高度。

背景

当我浏览我的网站时，结果 div 会根据搜索等动态内容进行更新。我能够获得结果 div 的高度，但它只是我可以获得的初始值。

更新div的代码

$results.unbind();
$results.empty();
$results.html(newContents);

我的尝试

请注意，我将这些值打印出来，以便在 firebug 中检查。

var $results = $('.results');          /* Prints out: */
console.log($results.height());        /* 18          */
console.log($results[0].scrollHeight); /* 18          */
console.log($results[0].clientHeight); /* 18          */
console.log($results.css('height');    /* 18px        */
console.log($results.attr('height');   /* undefined   */

高度远远超出页面底部，因此 18px 绝对不准确。我如何获得真正的价值？

可能的解决方案？

ryanulit 帮助我弄清楚 .height() 应该适合我正在做的事情。所以这导致我认为正确处理事件存在一些问题。应用程序中有很多地方返回 false 而不是调用 event.preventDefault()。问题是当你返回false时，除了event.preventDefault()之外，它还调用了event.stopPropagation()。

更新

我没有找到任何返回 false 似乎会影响高度的地方。但是，我确实发现直接在 html 中使用 style="height:0px;" 设置高度正确更新高度。我不知道还能尝试什么，所以我现在很难过......

【问题讨论】：

标签： javascript jquery height

【解决方案1】：

查看jquery的.height()函数。

这是一个 jsfiddle，显示它实际上正在改变：http://jsfiddle.net/EvybH/2

更新

height: 0px; 让我思考，所以我在小提琴中测试并更新：http://jsfiddle.net/EvybH/3/。

如果您在 css 中设置了特定高度，看起来 .height() 属性将始终返回该值。检查小提琴。你可以设置min-height: 18px，如果你想给div一个默认的高度，然后允许它展开。

【讨论】：

这是我在“我尝试过的内容”部分中测试的第一件事。
您能否展示如何更新 .results div 然后尝试再次获取高度的实际代码？我在我的小提琴示例中正是这样做的，它似乎得到了新的高度就好了。另外，您使用什么浏览器以防万一可能导致问题？
我用我用来更新 div 的代码更新了我的帖子。另外，IE7+和Firefox3.6+是我测试过的浏览器。
我更新了 jsfiddle。去小提琴，看看高度的值是否真的改变了你。我的代码与您的完全相同，并且正在 IE 和 FF 上运行。此外，为了记录，您不需要那里的 .empty() 调用。在这种情况下，.html() 将同时为您清除并添加新的 html。
你是对的。 jsfiddle 行为正常。我需要看看我的应用程序是否发生了一些奇怪的事情......

【解决方案2】：

正如之前的两个海报所说，.height() 应该可以工作，但是如果它不工作，我相信调用

.height(currentElement.height).height()

将返回一个刷新的高度（虽然非常 hacky 并且可能不鼓励）。

编辑：currentElement 是动态高度的元素

【讨论】：

我尝试打印出 $results.height($results.height).height() 但它仍然给了我 18。我还缺少什么吗？