JavaScript:如何获取动态创建的元素的宽度？

我是 JavaScript 新手。对我有耐心。

我在这个网站上搜索了相关问题，发现了两个: How to get width of a dynamically created element with $comiple in Angularj 和 jQuery + CSS. How do I compute height and width of innerHTML? 。它们的相关性和答案将在下面讨论。如果我错过了一个相关的问题并且这是一个重复的问题，请指导我。

我动态创建了一个 <div class="popup">(称之为“popup”)，用标记中的 innerHTML display: none; 中的 <div> 填充它，并将其插入到页面上。相关的 CSS 是:

.popup {
   top: 0;
   left: 0;
   width: 200px;
   height: 250px;
 }

使用 event.clientX ，我在鼠标悬停事件触发时相对于光标位置定位弹出窗口，如下所示:

var widthOffset = 75, heightOffset = 0;
var windowWidth, popupWidth;
// other code ...
windowWidth = $(window).width();
popupWidth = 200;   // popup.style.width returns nothing (not null,
                    // not undefined, just nothing).
// when event.clientX is in the left half of the window, display popup
// offset to the right of clientX;
// when clientX is in the right half, display popup offset to the left.
if( event.clientX > windowWidth/2 ){ widthOffset = -(widthOffset + popupWidth);}
popup.style.top = event.clientY - heightOffset + "px";
popup.style.left = event.clientX + widthOffset + "px";

CodePen 上的 Pen Popup Project Reduced Case 有一个有效的简化案例。

问题是我想以编程方式获取 popupWidth 而不是将其设置为固定数量。但是，正如评论所说，

popupWidth = popup.style.width;

没什么。 (也许它是一个空字符串:popupWidth === ""。我不确定。)

上面引用的第一个问题的答案说在尝试获取其宽度之前将弹出窗口插入到 DOM 中。我已经这样做了。 (请参阅 Pen。)但它仍然不起作用。

对第二个问题的第二个答案的评论说:



我有 display: none ，但是当我将其更改为 display: block 并设置 popupWidth = popup.style.width; 时，鼠标悬停时弹出窗口会“口吃”。

所以问题仍然存在:我如何以编程方式获取 popupWidth ，就像我对 windowWidth 所做的一样？

最佳答案

在@Redu 和@torazaburo 的帮助下，答案变得清晰起来。
popupWidth = popup.offsetWidth; 是正确的语句，但这两个条件都必须为真:

popup 必须已经插入到 DOM 中，并且

display: block; 必须已设置。

如果 popup 还在内存中或者 display: block; 没有设置，那么 popup.offsetWidth === 0。如果两个条件都为真，那么 popup.offsetWidth 就等于 CSS 中设置的宽度。

感谢两位评论者的帮助。

关于JavaScript:如何获取动态创建的元素的宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37084881/