Question

我正在编写一个指令，该指令试图放置一个元素，该元素附加到使用该指令的元素下面的页面主体。我的研究表明，获取我要显示的元素的实际顶部和左边，我可以使用el[0].getBoundingClientRect()，但是，当我在指令中使用它时，我得到一个＆＃34;空白＆＃34 ; rect reference（所有属性设置为0）。为了确保，我在指令中做了console.log(el[0])，然后在控制台窗口中手动选择了相同的元素来比较它们，看看我是否可以在控制台窗口中获取Bounding Rect，我可以。以下是相关的控制台行：

来自指令：

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

从控制台：

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

我有理由在指令中得到一个有效的矩形引用吗？

Answer 1

如果元素或其祖先之一的样式为getBoundingClientRect，则

display: none将返回零。您可以使用visibility: hidden来隐藏它，但要获得合适的尺寸。

此外，如果您在元素中放置了元素，则高度可能为零。

＆＃13;

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

＆＃13;

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>

＆＃13;

为什么我的指令得到了一个空的＆＃34;绑定客户端rect为el [0]？

1 个答案: