Question

如何使用纯JS获取元素bounding box的大小？并且bounding box我的意思是如果我包围该元素中的所有可见元素将创建的正方形的大小。

offsetWidth / offsetHeight和scrollWidth / scrollHeight不会这样做，因为该广场的大小取决于元素的overflow值他们没有。

有和没有overflow:hidden的示例：

＆＃13;

var first = document.getElementsByClassName('first')[0];
var second = document.getElementsByClassName('second')[0];

console.log(first.offsetHeight)
console.log(first.scrollHeight)
console.log(first.getBoundingClientRect())

console.log(second.offsetHeight)
console.log(second.scrollHeight)
console.log(second.getBoundingClientRect())

＆＃13;

.out {
  outline: 1px solid red;
}
.in {
  position: relative;
  width: 50px;
  height: 50px;
  background: red;
  top: 150px;
}
.second {
  overflow: hidden;
  outline: 1px solid blue;
}

＆＃13;

<div class="first out">
  <div class="in">
  </div>
</div>
<div class="second out">
  <div class="in">
  </div>
</div>

＆＃13;

.in元素中的

.first是可见的，因此.first边界框高度应包含它（它应该是200，实际上是scrollHeight）。但是，.in元素中的.second是不可见的，因此.second边界框高度不应包含它（它应该是50，实际上是{{1} }}）

因此，offsetHeight和offsetHeight都不能为您提供scrollHeight高度，除非您知道该元素的bounding box值。

获取元素边界框的大小

0 个答案: