时间戳

首页 > 解决方案 > 为什么 getBoundingClientRect() 将所有值返回为零？

javascript - 为什么 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);
}

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）。谁能解释为什么？

标签： javascripthtmlgetboundingclientrect

解决方案

简短回答：您应该在将元素添加到文档后调用 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>

推荐阅读