-4

我在 DOM 中添加了一个块级元素，比如一个p标签。它的尺寸应该是自动计算的（例如自动）。但是，至少在最初，我不能用 jQuery 检索它的高度。过了一段时间（大概已经发生了一些布局处理），我可以检索高度。

为了使一个元素真正可测量，除了将其添加到 DOM 之外，为了使其计算出的高度可检索，必须发生什么？

具体来说，我有一个select元素，其中包含一些option元素，每个元素都附加了图像 URL 数据。我调用了一个图像选择器插件，它读取option标签数据，隐藏select元素，并将选项转换为一个容器，其中的div元素如下所示：

<div class='container' style='width:800px'>
    <div class='convertedOptionElement' style='width:33.33%'>
        <div class='thumb' style='width:100%'>
            <img src="https://lh3.ggpht.com/hhG6g0m8Q6QqZnloQJHV9uXFdsDjpzD0vJdkbra5e_PiwOjVXuBdVR0D2L0RPmwb1zw=h900">
            <p>Image Title</p>
        </div>
    </div>
</div>

所以我有一个固定宽度的容器，它将以 33.33% 的宽度填充 div 元素（产生 3 列）。这些 div 中的每一个都代表转换后的选项元素之一。在其中的每一个中，都有一个 100% 宽度的 div 元素，其中包含一个imgandp标记。

此外，我正在使用 imagesLoaded 插件和 masonry 插件来布置图像。在加载每个图像后运行的 imagesLoadedprogress事件中，我可以清楚地看到img元素具有非零高度和宽度。然而，它的容器没有，p标签也没有。

唯一可能发生的特殊情况是，在使用图像选择器插件创建元素后，我立即使用 分离它们$('.convertedOptionElement').detach()，然后在加载每个图像时触发的 progressfor 事件中imagesLoaded，我将它们附加到容器并调用masonry.appended 方法以执行布局。这就是问题出现的地方，因为尽管所有内容都在 DOM 中，但计算出的高度为零。

请注意，即使我提供了精确的宽度（例如 250px 而不是 33.33% 和 100%），然后在同一个加载的事件处理程序中，我通过计算现有图像尺寸的缩放高度来明确设置 jQuery 中的宽度和高度（即所有父元素都有明确的大小）...段落标签的高度仍然为零。

这是我的代码，但这是有效的。它在我使用的确切上下文中不起作用，我不知道为什么。http://jsfiddle.net/p7cgahro/7/

4

2 回答 2

2

问题是一个父元素有'display：none;'，我没想到它会有。

事实证明，在modal('show')对话框上调用 bootstrap 后，它实际上并没有立即改变任何东西。

例如，在调用 之后modal('show')，对话框仍然有 CSS 类fade（没有 class in），它的显示样式仍然是none. 一段时间后，in添加的类基本上覆盖了fade该类的零不透明度并将其设置为 1（使用 CSS 动画）。该display:none样式也被删除。

从本质上讲，问题归结为这样一个事实，即父元素要么具有display:none和opacity:0，而此时我们正在尝试进行测量。特别是，它是display:none抛弃测量的值。

有趣的是，这个问题可以在我的问题的原始版本中直接回答，无需一行代码，因为我只是问“除了将元素添加到 DOM 之外，必须发生什么才能使元素实际可测量，以便可以检索其计算的高度？”

答案是……没有一个父元素可以有'display:none'。

于 2015-11-30T21:41:51.683 回答
1

Given your code:

$(document).append('<p>Hello</p>');
console.log($(document).find('p').height()); //zero, why?

You are attempting to append HTML to the document which is invalid. Use the body element instead:

$('body').append('<p>Hello</p>');
console.log($('body').find('p').height());

Working example

于 2015-11-30T16:49:19.887 回答