获取元素内容的高度

Question

我有一个div，使用CSS将高度设置为像素高度。 它的属性overflow设置为hidden 。 它的内容大小超过设定的高度。 如何获得div内容的高度（所有内容总数;也就是说如果将其设置为auto它的height是多少）？ var_representing_the_div.innerHeight工作吗？

这是一个这样的div的例子：

 div{ height:100px; overflow: hidden; } 

 <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque eget mi aliquam malesuada. Vivamus purus augue, vulputate vel mi nec, tincidunt porta libero. Pellentesque scelerisque vulputate auctor. Integer nec tincidunt sapien. Pellentesque quis velit lorem. Fusce faucibus nec odio nec fringilla. Etiam mattis, massa nec eleifend faucibus, nunc mauris eleifend justo, auctor congue dolor sem eu turpis. Phasellus tincidunt urna cursus nibh commodo ultricies. </p><p> Curabitur ac tempor ex, quis tristique mauris. Morbi nisi est, vestibulum id viverra non, hendrerit et dolor. Vivamus nibh lorem, tempus at leo sit amet, bibendum elementum dui. Mauris viverra sollicitudin lacinia. Donec sed ante nulla. Quisque tincidunt tincidunt augue. Fusce ultricies, ante non mollis pretium, libero odio rutrum nisi, vitae iaculis quam ligula eu diam. Nullam non nulla dolor. Nulla blandit magna iaculis cursus accumsan. Curabitur ac nunc nec enim mattis molestie. Nam imperdiet quam id lorem gravida tristique. Phasellus est nibh, pulvinar ac ex sit amet, sollicitudin mattis sem. Praesent maximus sit amet augue sit amet sodales. Fusce placerat auctor odio, a vulputate tellus ultricies nec. Cras convallis eros ac ornare suscipit. Suspendisse gravida laoreet nisl, at tristique nibh cursus sit amet. </p><p> Suspendisse pellentesque quis massa et convallis. Proin laoreet bibendum nunc, ac fringilla dolor pretium eu. Maecenas nec diam mattis, rutrum magna sed, varius tellus. Pellentesque et sagittis risus, a laoreet neque. Phasellus sodales dapibus massa ac mattis. Phasellus sem eros, malesuada a accumsan sed, dapibus vel urna. Pellentesque eu purus odio. Mauris ligula lorem, tristique imperdiet porta vel, ultricies nec turpis. Sed cursus finibus tempor. Aenean elit velit, posuere id nibh sit amet, volutpat consequat arcu. Proin in eros ipsum. Aliquam at turpis non urna congue accumsan. </p><p> Vivamus tincidunt at ante eu imperdiet. Donec a dictum turpis, in pulvinar turpis. Proin et feugiat quam. Etiam sed dapibus elit, ut laoreet lorem. Duis mollis tortor at erat lacinia, id venenatis tortor eleifend. Pellentesque non eros sit amet lacus condimentum suscipit. Phasellus ornare eu elit in placerat. Nunc sed ultrices nunc. Nunc ut lacinia est. Pellentesque placerat porta mi, nec dapibus ante tempor a. </p><p> Donec at tortor vel eros lobortis feugiat. Fusce commodo sodales libero auctor volutpat. Phasellus imperdiet finibus erat, eget viverra libero viverra ut. Suspendisse non venenatis est, eget pretium urna. Integer convallis neque nec eros rutrum, id hendrerit ipsum pharetra. Etiam dictum elementum magna, elementum semper lectus fermentum et. Nam sagittis sagittis neque quis semper. Morbi hendrerit libero nec elementum elementum. Donec hendrerit tincidunt arcu, vel bibendum velit suscipit ac. Mauris dolor enim, semper eget libero eget, vulputate accumsan massa. Integer rhoncus egestas tellus et porta. Pellentesque fringilla ac risus nec lacinia. Morbi blandit orci tincidunt libero volutpat, at eleifend augue imperdiet. Nunc non blandit massa, et pharetra massa. Curabitur aliquet augue et elit placerat commodo sit amet id ante. </p> </div> 

Answer 1

您将使用scrollHeight属性：

var el = document.getElementsByTagName('div')[0];
console.log(el.scrollHeight); // height with overflow

DEMO

Answer 2

 function myfun() { var scrollHeight = document.getElementById('myDiv').scrollHeight; document.getElementById('demo').innerHTML = scrollHeight; } 

 div{ height: 100px; overflow: hidden; } 

 <button onClick="myfun()">Get the div height</button> <p id="demo"></p> <div id="myDiv"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque eget mi aliquam malesuada. Vivamus purus augue, vulputate vel mi nec, tincidunt porta libero. Pellentesque scelerisque vulputate auctor. Integer nec tincidunt sapien. Pellentesque quis velit lorem. Fusce faucibus nec odio nec fringilla. Etiam mattis, massa nec eleifend faucibus, nunc mauris eleifend justo, auctor congue dolor sem eu turpis. Phasellus tincidunt urna cursus nibh commodo ultricies. </p><p> Curabitur ac tempor ex, quis tristique mauris. Morbi nisi est, vestibulum id viverra non, hendrerit et dolor. Vivamus nibh lorem, tempus at leo sit amet, bibendum elementum dui. Mauris viverra sollicitudin lacinia. Donec sed ante nulla. Quisque tincidunt tincidunt augue. Fusce ultricies, ante non mollis pretium, libero odio rutrum nisi, vitae iaculis quam ligula eu diam. Nullam non nulla dolor. Nulla blandit magna iaculis cursus accumsan. Curabitur ac nunc nec enim mattis molestie. Nam imperdiet quam id lorem gravida tristique. Phasellus est nibh, pulvinar ac ex sit amet, sollicitudin mattis sem. Praesent maximus sit amet augue sit amet sodales. Fusce placerat auctor odio, a vulputate tellus ultricies nec. Cras convallis eros ac ornare suscipit. Suspendisse gravida laoreet nisl, at tristique nibh cursus sit amet. </p><p> Suspendisse pellentesque quis massa et convallis. Proin laoreet bibendum nunc, ac fringilla dolor pretium eu. Maecenas nec diam mattis, rutrum magna sed, varius tellus. Pellentesque et sagittis risus, a laoreet neque. Phasellus sodales dapibus massa ac mattis. Phasellus sem eros, malesuada a accumsan sed, dapibus vel urna. Pellentesque eu purus odio. Mauris ligula lorem, tristique imperdiet porta vel, ultricies nec turpis. Sed cursus finibus tempor. Aenean elit velit, posuere id nibh sit amet, volutpat consequat arcu. Proin in eros ipsum. Aliquam at turpis non urna congue accumsan. </p><p> Vivamus tincidunt at ante eu imperdiet. Donec a dictum turpis, in pulvinar turpis. Proin et feugiat quam. Etiam sed dapibus elit, ut laoreet lorem. Duis mollis tortor at erat lacinia, id venenatis tortor eleifend. Pellentesque non eros sit amet lacus condimentum suscipit. Phasellus ornare eu elit in placerat. Nunc sed ultrices nunc. Nunc ut lacinia est. Pellentesque placerat porta mi, nec dapibus ante tempor a. </p><p> Donec at tortor vel eros lobortis feugiat. Fusce commodo sodales libero auctor volutpat. Phasellus imperdiet finibus erat, eget viverra libero viverra ut. Suspendisse non venenatis est, eget pretium urna. Integer convallis neque nec eros rutrum, id hendrerit ipsum pharetra. Etiam dictum elementum magna, elementum semper lectus fermentum et. Nam sagittis sagittis neque quis semper. Morbi hendrerit libero nec elementum elementum. Donec hendrerit tincidunt arcu, vel bibendum velit suscipit ac. Mauris dolor enim, semper eget libero eget, vulputate accumsan massa. Integer rhoncus egestas tellus et porta. Pellentesque fringilla ac risus nec lacinia. Morbi blandit orci tincidunt libero volutpat, at eleifend augue imperdiet. Nunc non blandit massa, et pharetra massa. Curabitur aliquet augue et elit placerat commodo sit amet id ante. </p> </div>