如何计算内部有一些文本和固定宽度的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. 现在，删除该元素，当然，你找到了高度＆amp;元素不存在

请参阅小提琴：To get an element's rendered height

Answer 2

<强>的jQuery

var height = $('.content').height();
console.log(height);

Vanilla JS

var height = document.getElementsByTagName('content').offsetHeight
console.log(height);

Answer 3

.height（）

  

描述：获取当前计算的高度。

• .height() - jQuery API文档

---

.innerHeight（）

  

描述：获取当前计算的高度，包括填充但不包括边框。

• .innerHeight() - jQuery API文档

---

.outerHeight（）

  

描述：获取当前计算的高度，包括填充，边框和可选的边距。

• .outerHeight() - jQuery API文档

Answer 4

在jQuery中：height会给出没有边框或填充的高度，innerHeight给出包含填充但没有边框的高度，outerHeight给出带边框和填充的高度以及包含选项保证金。

I vanillaJS，正如Prasath K指出的那样，offsetHeight会给你高度，包括填充和边框。

实际上没有办法计算不在dom中的元素的高度。您可以将它添加到dom中的某个位置，使用上述方法之一计算高度，然后再将其删除。

Answer 5

尝试。 height（），如

var div_hght = $('.content').height();
alert(div_hght);

Answer 6

除了上述技术之外，为了在计算时不在屏幕上显示元素，您可以使用visibility: hidden（CSS）。您通常不能使用display: none，因为该元素通常被认为在该状态下没有维度。

您还可以使用否定z-index渲染到位于某个遮挡元素下方的div。

Answer 7

此外，这里的答案忘记提到scrollHeight属性，该属性可用于获取DIV的完整高度（内部所有可滚动内容）。

要调用它，您需要使用类似这样的索引：

$('#content')[0].scrollHeight;