JavaScript：如何获取动态创建的元素'；宽度是多少？

我是JavaScript新手。对我有耐心

我在这个网站上搜索相关问题，发现了两个：和。下文讨论了它们的相关性及其答案。如果我遗漏了一个相关问题，而这是一个重复的问题，请告诉我

我动态创建一个

（称之为“弹出窗口”），从

显示：无中填充
innerHTML
，然后将其插入页面。相关的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处有一个正在工作的简化案例

问题是我希望通过编程获得
popuwidth
而不是将其设置为固定数量。但是，正如评论所说

popupWidth = popup.style.width;  

没什么。（可能是一个空字符串：PopuWidth==“”。我不确定。）

上面提到的第一个问题的答案是在试图获取其宽度之前将弹出窗口插入DOM。我已经这样做了。（看那支笔）但还是不行

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

根本问题是不能在display:none的元素上设置高度

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

因此问题仍然存在：如何通过编程获得
popuwidth
，就像使用
windowWidth
一样？
您可以这样做

var popupDiv = document.getElementsByClassName("popup")[0],
       width = window.getComputedStyle(popupDiv).width;

如果处理窗口或文档类型的元素，则
getElementsByClassName（element，null）
，
element.offsetWidth
或
element.clientWidth
不起作用。您必须访问宽度值，如

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

在@Redu和@torazaburo的帮助下，答案变得清晰了

popupWidth=popup.offsetWidth
是正确的语句，但这两个条件都必须为真：

弹出窗口必须已插入到DOM中，并且
显示：块必须已设置

如果弹出窗口仍在内存中或
显示：块尚未设置，则弹出.offsetWidth
==0。如果两个条件都为真，则
popup.offsetWidth
等于CSS中设置的宽度

感谢两位评论员的帮助。
我为什么要这样做而不是使用
offsetWidth
？@Redu尝试了您的解决方案，但收到一条控制台错误消息：
未能在“窗口”上执行“getComputedStyle”：参数1不是“元素”类型。
这似乎很奇怪，因为
document.getElementsByClassName（）返回一个元素。还有什么意见吗？（很抱歉出现了runon段落。我还没有弄清楚如何获取多段落注释。当我点击
return`，编辑器只是提交注释。）我猜您正在处理一个窗口类型元素
getComputedStyle（window）
、
window.offsetWidth
或
window.clientWidth
对窗口元素不起作用。您可能需要使用var
width=window.innerWidth
@torazaburo之类的工具。请您详细说明一下好吗？我在
offsetWidth
上迷路了。我的意思是
popupDiv.offsetWidth
将给出元素的宽度。您不使用jQuery函数有什么特别的原因吗？您的代码笔中似乎包含了jQuery函数。是的。我不知道JQuery。通过研究“如何获得窗口宽度”这个问题，我找到了答案，JQuery函数
$（window.width（）
。通过更多的研究，我学会了如何在.js文件中包含JQuery。这就是我对JQuery的全部了解。你能提供一个具体的答案吗？