如何在网页上显示前确定DIV的高度最佳方法？

Question

我有一个脚本，可以从服务器获取数据并根据数据组合一个DIV。该DIV将包含图像、文本和其他未确定的内容。我想自由地排列它，所以我需要在向用户显示之前知道它的高度和宽度。

但是根据我的理解，我应该先请求浏览器进行渲染，否则我无法知道它的宽度和高度。

有没有最好的方法可以在不向用户显示DIV的情况下知道其宽度和高度？

编辑：

一些好心人建议我使用jquery的.width()方法，但我想知道如果DIV包含图像，jquery会等待图像下载后再计算吗？我事先不知道图像的尺寸。

- Bin Chen

Answer 1

您可以在 div 上设置 display: none 样式。然后使用 jQuery 中的 .width()，您将获得此值。

在计算期间，它将使用 .swap() 设置样式，以便元素可见，调用回调函数计算宽度并交换样式。

它将设置（请参见 code）：

• position: absolute
• visiblity: hidden
• display: block

编辑（请参见评论）：

如果您正在加载图像，并且希望确保在计算宽度之前加载图像，则可以将宽度计算附加为 onload 处理程序，如下所示：

$('#someImg').load(function() { 
  // image is loaded, you can calculate the width
  console.log($('#test').width())); 
});

这是一个可工作的例子，在这里。

- kubetz

---

@BinChen：你可以在图片上使用.onload并在那里检查宽度。我很快会更新我的答案，并提供代码示例。 - kubetz

@BinChen 我更新了我的答案 - 链接中包含一个可工作的示例。 - kubetz

Answer 2

jQuery很聪明，能够计算尺寸，但只有在注入到DOM中后才能进行。

var html = "<span>My Content</span>";

//hide your element then insert it into the webpage
var html_el = $(html).hide();
$('body').append(html_el);

//get width and height
var width = html_el.width();
var height = html_el.height();

//Remove element from page if no longer needed
html_el.remove();

此外需要注意的是，块级元素<div>将被呈现为屏幕宽度，因此无法正确报告包含元素的宽度。为了解决这个问题，您可以向容器添加以下样式：float:left或display:inline-block。例如：

var html = "<div><h2>heading</h2><input type=\"text\" /></div>";

var html_el = $(html).css('float','left').hide();

- paulcol.

---

我会尝试这个，但仍需要更多的输入。 - Bin Chen

谢谢，正如我的新编辑所说，如果div包含图像，那么jquery会意识到这一点并等待图像下载完成，因为我事先不知道图像的尺寸。 - Bin Chen

在注入图像之前，您需要将它们加载。 $('<img src="myimg.jpg" />').load(function(){ /*done: insert html + check*/ }); http://api.jquery.com/load-event/ - paulcol.

Answer 3

设置 style="display:none" 检查宽度，如果需要则显示

- Андрей Петров

---

据我所知，display:none会导致浏览器不渲染该元素，因此无法确定其大小。 - Eugen Rieck

当使用JQuery时，即使display:none（从1.4.4开始），高度和宽度也会被计算。 - 0x6C77

Answer 4

如果您将style.display设置为'block'，并将style.visibility设置为'hidden'，浏览器应该计算大小，但不显示div。

然而，我不知道所有浏览器是否都能正确执行此操作。

- Eugen Rieck

---

应该是 style.visibility :) - Willem Mulder

Answer 5

我能想到的最好方法是快速显示它（根据您的情况甚至可能不在屏幕上），然后获取其大小，然后再隐藏它。

但是，如果div包含图像，则需要先加载这些图像（或在它们上设置宽度/高度），然后才能知道div容器的大小。您可以使用

$(document).load(function() { calculate height... })

只有在完整页面（包括图像）加载完成后才计算高度。

- Willem Mulder

Answer 6

我做了类似的事情，其中高度和宽度都是未知的。用于填充display:none div的数据来自snmp请求，因此与获取和显示该数据相关联的时间。这是我使用的一小段代码，根据高度调整绝对位置。

var height = $('.stripPopupContainer', this).height();

    $('.stripPopupContainer', this).css({
        left: '-5px',
        top: '-'+ height + 'px'
    });

- au_stan