Question

我是一名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，我在触发mouseover事件时相对于光标位置设置弹出窗口，如下所示：

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的笔Popup Project Reduced Case上有一个缩小的工作案例。

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

popupWidth = popup.style.width;

什么都不是。（也许它是一个空字符串：popupWidth ===“”。我不确定。）

上面提到的第一个问题的答案是在尝试获取其宽度之前将弹出窗口插入到DOM 中。我做到了这一点。（参见笔。）不过，它不起作用。

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

根本问题是无法使用display：none。
在元素上设置高度

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

所以问题仍然存在：我如何以编程方式获取popupWidth，就像使用windowWidth一样？

Answer 1

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

popupWidth = popup.offsetWidth;是正确的陈述，但这两个条件必须为真：

弹出窗口必须已插入DOM，
display: block;必须已设置。

如果弹出窗口仍在内存中或尚未设置display: block;，则popup.offsetWidth === 0.如果两个条件均为真，则popup.offsetWidth等于宽度在CSS中设置。

感谢两位评论者的帮助。

Answer 2

你可以这样做

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;

JavaScript：如何获得动态创建的元素的宽度？

2 个答案: