javascript - 如何计算内部有一些文本和固定宽度的div的高度

Question

我有以下代码:

<div class="content">
                        <a href="/profile/Nat's Rare &amp; Raw" class="link-name"><strong>Irene Natalia</strong></a>
                        Hooray! we'll proceed with the shipping and inform the tracking # tomorrow :) Thank you, Angel! :)

                        <br>
                        <span class="date">7 days ago</span>
                    </div>

我想通过使用 javascript 知道这个 div 的高度。有办法吗？ 此 div 具有固定大小的宽度(在本例中为 150px)。我只是想知道 div 的高度说文字改变了。首选方法是通过 jQuery，但 javascript 也可以

编辑:

这里有一个非常重要的注意事项是，这是在渲染 div 之前进行的计算。我基本上是在创建一个 pinterest 布局，我需要计算元素卡中评论的高度，以便 masonry 可以在加载图像之前先对其进行布局。

Answer 1

Javascript:

element.offsetHeight;

这给出了元素的高度

查看关于offsetHeight这是纯 javascript。

jQuery:

$elem.height(); - 给出没有 padding、border 和 margin 的元素高度

$elem.innerHeight(); - 给出包含填充的高度

$elem.outerHeight(true); - 给出高度，包括填充、边框和边距

编辑:

如果你想在渲染之前找到元素的高度，那么我可以给你许多可能的解决方案之一

1. 使用相应的 innerHTML 将元素附加到正文中
2. 使用上述任何方法求出高度
3. 现在，删除元素，当然，您发现高度和元素不存在

参见 fiddle :To get an element's rendered height