Javascript 确定DIV'；在网页上可见之前的高度？

我有一个脚本，它将从服务器获取数据并根据它组成一个DIV。DIV将包含图像、文本和其他未确定的内容。我想自由地安排它，所以我需要知道它的高度和宽度，然后才显示给用户

但根据我的理解，我应该让浏览器先渲染它，否则我无法知道宽度和高度

有没有最好的方法知道一个DIV的宽度和高度而不向用户显示

编辑：

一些好人建议我使用jquery的.width（）方法，但我想知道，如果DIV包含image，jquery会在镜像下载后等待吗？我事先不知道图像的尺寸。

设置

style=“display:none”

---

如果设置了

样式，请检查宽度，然后根据需要显示。将
显示为
'block'
和
样式。将可见性
显示为
'hidden'
浏览器应计算大小，但不显示
div

但是，我不知道是否所有浏览器都能正确执行此操作。
您可以在div上设置
display:none
样式。然后使用jQuery中的
.width（）
，您将获得此值

在计算期间，它将用于设置样式以使元素可见，调用callback计算宽度并将样式调回

它将设置（请参阅）：


位置：绝对位置
可见：隐藏
显示：块

编辑（见评论）：

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

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

就是一个很好的例子。
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包含图像，则需要先加载这些图像（或者在图像上设置宽度/高度），然后才能知道div容器的大小。你可以用

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

仅在加载完整页面（包括图像）后计算高度。
在高度和宽度都未知的情况下，我会执行类似的操作。用display:none填充div的数据是来自snmp请求的数据，因此有一些时间与获取和显示该数据相关。下面是我用来根据高度调整绝对位置的代码片段

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

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

AFAIK display:none将导致浏览器不呈现元素，因此不知道其大小。使用JQuery时，即使display:none（从1.4.4开始，我想）也会计算高度和宽度。我会尝试此操作，但仍需要更多输入。谢谢，正如我的新编辑所说，如果div包含图像，jquery是否会意识到这一点并等待图像下载，因为我事先不知道图像的尺寸。您需要在注入图像之前加载图像<代码>$（''）.load（函数（）{/*done:insert html+check*/}）
应该是style.visibility:）@BinChen:您可以在图像上使用
.onload
并检查宽度。我将很快用代码示例更新我的答案。@BinChen我更新了我的答案-链接包含一个工作示例。
var height = $('.stripPopupContainer', this).height();

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