为什么 getBoundingClientRect() 将所有值返回为零？答案

【问题标题】：Why is getBoundingClientRect() returning all values as zero?为什么 getBoundingClientRect() 将所有值返回为零？
【发布时间】：2020-12-22 20:41:26
【问题描述】：

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

function popup(o){
    if(typeof o==="undefined")o={"width":"75%","height":"75%","html":""};
    if(!o.width)o.width="75%";
    if(!o.height)o.height="75%";
    if(!o.html)o.html="";
    var p=document.createElement("span");
    var c=document.createElement("span");
    c.setAttribute("style","z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)");
    p.setAttribute("style","width:"+o.width+";height:"+o.height+";background-color:#444444;position:absolute;z-index:2;border-radius:25px;padding:20px;border:10px solid white;color:white;font-size:60px");
    p.innerHTML=o.html;
    document.body.appendChild(c);
    document.body.appendChild(p);
}

popup({"html":"<i>Test popup</i>", "width": "50%", "height": "50%"});

<!DOCTYPE html>
<html>
    <head>
        <title>Popup test</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h1>Popup Testing Page</h1>
        <span>other text</span>
    </body>
</html>

getBoundingClientRect() 正在返回一个对象，该对象的所有属性为值为 0 的整数。

function popup(o){
    if(typeof o==="undefined")o={"width":"75%","height":"75%","html":""};
    if(!o.width)o.width="75%";
    if(!o.height)o.height="75%";
    if(!o.html)o.html="";
    var p=document.createElement("span");
    var c=document.createElement("span");
    c.setAttribute("style","z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)");
    p.setAttribute("style","width:"+o.width+";height:"+o.height+";background-color:#444444;position:absolute;z-index:2;border-radius:25px;padding:20px;border:10px solid white;color:white;font-size:60px");
  
  var bcr=p.getBoundingClientRect();
  alert(bcr.width);
  alert(bcr.height);
  alert(bcr.top);
  alert(bcr.bottom);
  alert(bcr.x);
  alert(bcr.y);
  alert(bcr.left);
  alert(bcr.right);
  
    p.innerHTML=o.html;
    document.body.appendChild(c);
    document.body.appendChild(p);
}

popup({"html":"<i>Test popup</i>", "width": "50%", "height": "50%"});

<!DOCTYPE html>
<html>
    <head>
        <title>Popup test</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h1>Popup Testing Page</h1>
        <span>other text</span>
    </body>
</html>

运行堆栈 sn-p，您将收到 getBoundingClientRect() 的所有值（全为 0）的警报。谁能解释一下为什么？

【问题讨论】：

p 是一个没有父母的span。无父元素没有维度。您必须在测量之前将元素附加到 DOM。
在将孩子附加到正文后调用 bcr=p.getBoundingClientRect()
@Teemu ：是的，这就是问题所在，谢谢！

标签： javascript html getboundingclientrect

【解决方案1】：

简短回答：您应该在将元素添加到文档后调用 getBoundingClientRect，如下所示

function popup(o){
    if(typeof o==="undefined")o={"width":"75%","height":"75%","html":""};
    if(!o.width)o.width="75%";
    if(!o.height)o.height="75%";
    if(!o.html)o.html="";
    var p=document.createElement("span");
    var c=document.createElement("span");
    c.setAttribute("style","z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)");
    p.setAttribute("style","width:"+o.width+";height:"+o.height+";background-color:#444444;position:absolute;z-index:2;border-radius:25px;padding:20px;border:10px solid white;color:white;font-size:60px");
          p.innerHTML=o.html;
    document.body.appendChild(c);
    document.body.appendChild(p);

  var bcr=p.getBoundingClientRect();
  alert(JSON.stringify(bcr, null, 3));
  

}

popup({"html":"<i>Test popup</i>", "width": "50%", "height": "50%"});

<!DOCTYPE html>
<html>
    <head>
        <title>Popup test</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h1>Popup Testing Page</h1>
        <span>other text</span>
    </body>
</html>

【讨论】：