Javascript 为什么getBoundingClientRect（）将所有值返回为零？

我正在制作一个弹出功能，在用户屏幕上创建一个弹出窗口。代码如下：

功能弹出窗口（o）{
如果（typeof o==“未定义”）o={“宽度”：“75%”，“高度”：“75%”，“html”：“}；
如果（！o.width）o.width=“75%”；
如果（！o.height）o.height=“75%”；
如果（！o.html）o.html=“”；
var p=document.createElement（“span”）；
var c=document.createElement（“span”）；
c、 setAttribute（“样式”，“z索引：1；位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景色：rgba（0,0,0,0.5）”）；
p、 setAttribute（“样式”、“宽度：+o.width+”高度：+o.height+”；背景色：#444444；位置：绝对；z索引：2；边框半径：25px；填充：20px；边框：10px纯白；颜色：白色；字体大小：60px”）；
p、 innerHTML=o.html；
文件.正文.附件（c）；
文件.正文.附件（p）；
}
弹出窗口（{“html”：“测试弹出窗口”，“宽度”：“50%”，“高度”：“50%”）

弹出测试
弹出测试页面
其他文本
简短回答：在将元素添加到文档后，应调用getBoundingClientRect，如下所示


功能弹出窗口（o）{
如果（typeof o==“未定义”）o={“宽度”：“75%”，“高度”：“75%”，“html”：“}；
如果（！o.width）o.width=“75%”；
如果（！o.height）o.height=“75%”；
如果（！o.html）o.html=“”；
var p=document.createElement（“span”）；
var c=document.createElement（“span”）；
c、 setAttribute（“样式”，“z索引：1；位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景色：rgba（0,0,0,0.5）”）；
p、 setAttribute（“样式”、“宽度：+o.width+”高度：+o.height+”；背景色：#444444；位置：绝对；z索引：2；边框半径：25px；填充：20px；边框：10px纯白；颜色：白色；字体大小：60px”）；
p、 innerHTML=o.html；
文件.正文.附件（c）；
文件.正文.附件（p）；
var bcr=p.getBoundingClientRect（）；
警报（JSON.stringify（bcr，null，3））；
}
弹出窗口（{“html”：“测试弹出窗口”，“宽度”：“50%”，“高度”：“50%”）

弹出测试
弹出测试页面
其他文本
p
是一个无父母的
span
。无父元素没有维度。在测量DOM之前，必须将元素附加到DOM中。在将子元素附加到DOM后调用bcr=p.getBoundingClientRect（）body@Teemu：是的，这就是问题所在，谢谢！