Question

我希望通过JavaScript获得内部html高度。假设我有

<div>Content</div>

如果div字体大小增加或嵌套在父级内的很多div，我如何获得父div的高度？

编辑：即使嵌套的div也有边框和填充。

Answer 1

如果必须在香草JS ......

var height = document.getElementById('content').clientHeight;

这将包括元素中的任何边框或滚动条。如果你想要内部HTML（不包括填充），你可以改用offsetHeight。

Answer 2

使用clientHeight和getElementsByTagName div获取特定div高度

document.getElementsByTagName('div')[0].clientHeight

http://codepen.io/nagasai/pen/XKoxZw

Answer 3

这样的东西？

<div id="MyDiv">Content</div>

console.log(document.getElementById("MyDiv").offsetHeight);

Answer 4

在身高计算中包含填充和边框：

的document.getElementById（＆＃39; myDiv＆＃39）。的offsetHeight;

Answer 5

在父元素的高度为0的情况下，您接受的答案是错误的，并且您想要其中内容的高度（这是我认为OP所要求的）。在这种情况下，scrollHeight是您想要的属性。

const divInnerContentHeight = document.querySelector('div').scrollHeight;

使用clientHeight或offsetHeight将返回0;

Answer 6

 //We can do his using JQuery

    //Returns the element's height
    $('#content').height();
   // Returns the height with padding
    $('#content').innerHeight();
   // Returns the height with padding and border
    $('#content').outerHeight();
   // Returns the height with padding,border and margin
    $('#content').outerHeight(true);

如何获得内部HTML内容高度

6 个答案: