为什么我的指令得到 el[0] 的“空”边界客户端矩形？

Question

我正在编写一个指令，试图将附加到页面正文的元素放置在使用该指令的元素下方。我的研究表明，获取我想要显示的元素的实际顶部和左侧，我可以使用el[0].getBoundingClientRect()，但是，当我在指令中使用它时，我得到一个“空白”矩形引用（所有属性设置为 0） 。只是为了确保，我console.log(el[0])在指令中执行了操作，然后在控制台窗口中手动选择相同的元素来比较它们，看看是否可以在控制台窗口中获取边界矩形，我可以。以下是相关的控制台行：

\n\n

来自指令：

\n\n

console.log(el[0]);\n-> <div tabindex=\xe2\x80\x8b"1" class=\xe2\x80\x8b"form-control border-radius ng-binding ng-isolate-scope" time-for=\xe2\x80\x8b"schedule.monday.startTime" id="div">\xe2\x80\x8b1:29 PM\xe2\x80\x8b</div>\xe2\x80\x8b\nconsole.log(el[0].getBoundingClientRect());\n-> ClientRect {height: 0, width: 0, left: 0, bottom: 0, right: 0\xe2\x80\xa6}\n

\n\n

从控制台：

\n\n

document.getElementById("div");\n-> <div tabindex=\xe2\x80\x8b"1" class=\xe2\x80\x8b"form-control border-radius ng-binding ng-isolate-scope" time-for=\xe2\x80\x8b"schedule.monday.startTime" id=\xe2\x80\x8b"div">\xe2\x80\x8b1:29 PM\xe2\x80\x8b</div>\xe2\x80\x8b\ndocument.getElementById("div").getBoundingClientRect();\n-> ClientRect {height: 34, width: 90, left: 618, bottom: 347, right: 708\xe2\x80\xa6}\n

\n\n

是否有明显的原因导致我无法在指令中获得有效的矩形引用？

\n

Answer 1

getBoundingClientRect如果该元素或其祖先之一被 styled ，则返回零display: none。您可以使用visibility: hidden仍然隐藏它但获得适当的大小。

另外，如果元素内部有浮动元素，则高度可能为零。

console.log(document.querySelector('#a').getBoundingClientRect());
console.log(document.querySelector('#b').getBoundingClientRect());
console.log(document.querySelector('#c').getBoundingClientRect());
console.log(document.querySelector('#d').getBoundingClientRect());

see console

<div id="a" style="display: none;">hidden bits</div>
<div style="display: none;">
    <div id="b">hidden bits</div>
</div>
<div id="c" style="visibility: hidden;">hidden bits</div>
<div id="d" style="">
    <div style="float: left;">floated</div>
    <div style="float: left;">floated</div>
</div>