如何获取内部 HTML 内容高度

Posted 2023-03-06

【中文标题】如何获取内部 HTML 内容高度

【英文标题】：How to get inner HTML content height

【发布时间】：2016-12-18 14:29:56

【问题描述】：

我想通过 javascript 获取内部 html 高度。假设我有

<div>Content</div>

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

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

【问题讨论】：

如果jquery是可以接受的，那么.height()函数

复制：***.com/a/15615701/1252056

Get div height with plain JavaScript的可能重复

CSS / JavaScript - How do you get the rendered height of an element?的可能重复

【参考方案1】：

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

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

这不会在元素中包含任何边框或滚动条，只是填充。如果你想包含边框和滚动条，你可以改用offsetHeight。

【讨论】：

clientHeight 仅包括内边距，offsetHeight 包括内边距、边框和滚动条

【参考方案2】：

这样的？

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

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

【参考方案3】：

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

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

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

【参考方案4】：

在您的高度计算中包括内边距和边框：

document.getElementById('myDiv').offsetHeight;

【参考方案5】：

如果父元素的高度为0，并且您想要其中内容的高度（我相信这是 OP 所要求的），则接受的答案是不正确的。在这种情况下，scrollHeight 就是您想要的属性。

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

使用clientHeight 或offsetHeight 将返回0；

【讨论】：

这是最好的答案，它可以让您在不了解内容的情况下获得内部高度。

这是正确答案..

【参考方案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);

【参考方案7】：

你可以将内容（ele）滚动到内容的高度。

ele.scrollHeight