How can I get the size of the bounding box of an element with pure JS?
And by bounding box I mean the size of the square that will be created if I surround all the visible elements in that element.
offsetWidth/offsetHeight and scrollWidth/scrollHeight won't do because the size of that square depends on the overflow value of the element and they don't.
Example with and without overflow:hidden:
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()).out {
outline: 1px solid red;
}
.in {
position: relative;
width: 50px;
height: 50px;
background: red;
top: 150px;
}
.second {
overflow: hidden;
outline: 1px solid blue;
}<div class="first out">
<div class="in">
</div>
</div>
<div class="second out">
<div class="in">
</div>
</div>.in in the .first element is visible, so the .first bounding box height should include it ( it should be 200, which is actually the scrollHeight ).
But, .in in the .second element, is not visible, so the .second bounding box height shouldn't include it ( it should be 50, which is actually the offsetHeight)
So, neither offsetHeight nor scrollHeight can give you the bounding box height, unless you know the overflow value of the element.
