我正在制作一个弹出功能，在用户屏幕上创建一个弹出窗口。这是代码:
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)的警报。谁能解释一下为什么吗？
最佳答案
简短回答:将元素添加到文档后，您应该调用 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>关于javascript - 为什么 getBoundingClientRect() 将所有值返回为零？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65415569/