Question

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

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

有没有最好的方法来了解DIV的宽度和高度而不向用户显示？

编辑：

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

Answer 1

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

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

它将设置（参见code）：

位置：绝对
visiblity：hidden
display：block

编辑（见评论）：

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

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

HERE 是一个有效的例子。

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();

Answer 3

设置style="display:none" 检查宽度，然后显示是否需要

Answer 4

如果您将style.display设置为'block'而将style.visibility设置为'hidden'，则浏览器应计算尺寸，但不会显示{{1 }}

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

Answer 5

我能想到的最好的就是快速展示它（根据你的情况甚至可能在屏幕外），然后获取它的大小，然后再次隐藏它。

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

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

仅在加载完整页面（包括图像）后计算高度。

Answer 6

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

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

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

在网页上可见之前确定DIV高度的最佳方法是什么？

6 个答案: