jQuery 如何计算带有一些文本和固定宽度的 div 的高度

how to calculate the height of a div with some text inside and a fixed width

提问by aherlambang

I have the following code:

我有以下代码：

<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>

I wanted to know the height of this div from using javascript. Is there a way to do so? This div has a fixed sized width (in this case 150px). I just wanted to know the height of the div say the text changed. Preferred method is via jQuery but javascript is fine as well

我想通过使用 javascript 知道这个 div 的高度。有没有办法这样做？此 div 具有固定大小的宽度（在本例中为 150 像素）。我只是想知道 div 的高度说文本改变了。首选方法是通过 jQuery，但 javascript 也很好

EDIT:

编辑：

A very important note here is that this is a calculation before the div is being rendered. I am basically creating a pinterest layout and I need to calculate the height of the comments in the item card so that masonry can lay it out first before the image is loaded.

这里有一个非常重要的注意事项，这是在呈现 div 之前的计算。我基本上是在创建一个 pinterest 布局，我需要计算项目卡中注释的高度，以便砌体可以在加载图像之前先将其布局。

回答by Prasath K

Javascript:

Javascript：

element.offsetHeight;

This gives the height of an element

这给出了元素的高度

See about offsetHeighthere and this is pure javascript.

在这里查看offsetHeight，这是纯 javascript。

jQuery:

jQuery：

$elem.height();- gives height of the element without padding , border and margin

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

$elem.innerHeight();- gives height including padding

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

$elem.outerHeight(true);- gives height including padding, border and margin

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

EDIT:

编辑：

If you want to find the height of the element before it is rendered , then i can give you one of many possible solutions

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

1. Append the element to the body with respective innerHTML's
2. Find the height using any of the above methods
3. Now,remove the element and of course , you found the height & element is not there

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

See Fiddle :To get an element's rendered height

请参阅 Fiddle ：获取元素的渲染高度

回答by Seth

jQuery

jQuery

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

Vanilla JS

香草JS

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

回答by Seth

.height()

。高度（）

Description: Get the current computed height.

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

• .height()- jQuery API Documentation

• .height()- jQuery API 文档

---

---

.innerHeight()

.innerHeight()

Description: Get the current computed height, including padding but not border.

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

• .innerHeight()- jQuery API Documentation

• .innerHeight()- jQuery API 文档

---

---

.outerHeight()

.outerHeight()

Description: Get the current computed height, including padding, border, and optionally margin.

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

• .outerHeight()- jQuery API Documentation

• .outerHeight()- jQuery API 文档

回答by buritos

In jQuery: heightwill give the height without border or padding, innerHeightgives the height including padding but without border and outerHeightgives height with border and padding with the option to include margin as well.

在 jQuery 中：height将给出没有边框或填充innerHeight的高度，给出包括填充但没有边框的outerHeight高度，并给出带有边框和填充的高度以及包括边距的选项。

I vanillaJS, as Prasath K pointed out, offsetHeightwill give you the height including padding and border.

正如 Prasath K 所指出的，我 vanillaJSoffsetHeight会给你包括填充和边框在内的高度。

There isn't really a way to calculate height of an element that is not in the dom. You can add it somewhere in the dom, calculate the height using one of the above methods and then remove it again.

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

回答by Gautam3164

Try like .height()like

试试吧。高度（）喜欢

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

回答by mishgosh

In addition to the techniques described above, in order to not have the element on screen when calculating, you can use visibility: hidden(CSS). You can't usually use display: none, because the element is usually considered to have no dimensions in that state.

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

You could also render to a div positioned below some obscuring element, using a negative z-index.

您还可以使用负数渲染到位于某些模糊元素下方的 div z-index。

回答by Aerodynamika

Also, the answers here forget to mention the scrollHeightproperty, which can be used to get the full height of a DIV (all the scrollable content inside).

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

To call it, you need to use an index like that:

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

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