如何计算内部有一些文本和固定宽度的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布局,我需要计算项目卡中注释的高度,以便在加载图像之前,砌体可以先放置它.

Answer 1

使用Javascript:

element.offsetHeight;

这给出了元素的高度

在这里查看offsetHeight,这是纯粹的javascript.

jQuery的:

$elem.height(); - 给出元素的高度,没有填充,边框和边距

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

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

编辑:

如果要在渲染之前找到元素的高度,那么我可以为您提供许多可能的解决方案之一

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

请参阅小提琴:获取元素的渲染高度