添加到 DOM 的元素在 jQuery 中没有宽度或高度？

Posted 2023-03-06

【中文标题】添加到 DOM 的元素在 jQuery 中没有宽度或高度？

【英文标题】：Elements added to the DOM have no width or height in jQuery?

【发布时间】：2016-03-04 08:55:48

【问题描述】：

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

除了将元素添加到 DOM 中以使其计算出的高度可检索之外，还必须发生什么才能使元素实际可测量？

具体来说，我有一个 select 元素和一些 option 元素，每个元素都附加了图像 URL 数据。我调用了一个image-picker plugin，它读取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 元素，其中包含一个 img 和 p 标记。

此外，我正在使用 imagesLoaded 插件和 masonry 插件来布置图像。在每个图像加载后运行的 imagesLoaded progress 事件中，我可以清楚地看到 img 元素的高度和宽度均不为零。但是，它的容器没有，p 标记也没有。

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

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

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

【问题讨论】：

从您的代表来看，您已经在这里待了足够长的时间，并且看到了足够多的问题，知道这不是它的做法。我们需要查看您的代码才能开始诊断任何问题。

一般来说，在没有内容或样式的情况下是没有维度的：jsfiddle.net/p7cgahro

好吧，正如我所说，没有理由不使用您提供的基本信息。如果您愿意为我们提供一个实际尝试的示例，我相信有人会花一些时间来帮助您。

您不能附加到document - 使用body。 jsfiddle.net/p7cgahro/1

他做到了。你试过他的小提琴吗？

【参考方案1】：

给定您的代码：

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

您正试图将 html 附加到无效的 document。请改用body 元素：

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

Working example

【讨论】：

那是一个例子，不要从字面上理解为添加到文档中。

@Triynko 您需要发布一个代码示例来演示您在说什么，因为 Rory 提供的示例反驳了您的说法。

【参考方案2】：

问题是一个父元素有'display:none;'，这是我没想到的。

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

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

本质上，问题归结为这样一个事实，即在我们尝试进行测量时，父元素要么有display:none 和opacity:0。特别是，display:none 值导致了测量结果的偏差。

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

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