获取DIV的实际大小,包括溢出(超出父绑定的元素)

时间:2015-06-17 07:50:07

标签: javascript html

考虑这个例子:



var elem = document.getElementById("elem");

alert(elem.offsetHeight + " " + elem.getBoundingClientRect().height);

<div id="elem" style="position:relative; width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box">
    <div style="position: absolute; bottom: -15px;">Test</div>
</div>
&#13;
&#13;
&#13;

如你所见,我的div实际高度为100px(如其风格)加上其子项的超出部分(溢出)。但是,offsetHeightgetBoundingClientRect().height都会返回100px,因此不会考虑溢出部分。我期待115px左右的东西。

那么,如何在考虑到所有孩子的情况下获得任意DIV的实际大小?可能请不要使用jQuery。

编辑:关于可能的重复CSS / JavaScript - How do you get the rendered height of an element?,这不是我想要的。

1 个答案:

答案 0 :(得分:1)

elem.scrollHeight

https://jsfiddle.net/LLfeh8nk/

alert(elem.scrollHeight + " " + elem.getBoundingClientRect().height);