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

Question

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

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>

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

Answer 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>

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

Why is getBoundingClientRect() returning all values as zero?

html

javascript

getboundingclientrect