13

我有以下代码：

<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 具有固定大小的宽度（在本例中为 150 像素）。我只是想知道 div 的高度说文本改变了。首选方法是通过 jQuery，但 javascript 也可以

编辑：

这里非常重要的一点是，这是在渲染 div 之前的计算。我基本上是在创建一个 pinterest 布局，我需要计算项目卡中注释的高度，以便砌体可以在加载图像之前先对其进行布局。

4

7 回答 7

19

Javascript：

element.offsetHeight;

这给出了元素的高度

请参阅此处的offsetHeight，这是纯 javascript。

jQuery：

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

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

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

编辑：

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

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

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

于 2013-06-07T04:33:11.153 回答
2

jQuery

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

香草JS

var height = document.getElementsByTagName('content').offsetHeight
console.log(height);
于 2013-06-07T04:43:00.033 回答
2

。高度（）

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

在此处输入图像描述

.innerHeight()

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

在此处输入图像描述

.outerHeight()

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

于 2013-06-07T04:49:19.973 回答
1

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

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

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

于 2013-06-07T04:35:54.663 回答
0

试试喜欢。高度（）喜欢

var div_hght = $('.content').height();
alert(div_hght);
于 2013-06-07T04:31:36.677 回答
0

除了上述技术之外，为了在计算时不让元素出现在屏幕上，您可以使用visibility: hidden(CSS)。您通常不能使用display: none，因为该元素通常被认为在该状态下没有尺寸。

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

于 2017-05-03T15:40:29.763 回答
0

另外，这里的答案忘了提到scrollHeight属性，它可以用来获取 DIV 的完整高度（里面的所有可滚动内容）。

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

$('#content')[0].scrollHeight;
于 2018-12-20T14:01:04.923 回答