How to get actual height without jQuery

Question

var test = document.getElementById('test');
console.log(test.offsetHeight);

<div style="height: 30px;" id="test">
  <p>ffffffffff</p>
  <p>gggggggggg</p>
  <p>aaaaaaaaaa</p>
  <p>dddddddddd</p>
</div>

As you can see, the content in test div is overflow and more than 30px: so how to get accurate height?

Answer 1

var test = document.getElementById('test');
alert(test.scrollHeight);

<div style="height: 30px;" id="test">
  <p>ffffffffff</p>
  <p>gggggggggg</p>
  <p>aaaaaaaaaa</p>
  <p>dddddddddd</p>
</div>

try scrollHeight

Answer 2

You can use either .clientHeight or .offsetHeight;.

What is the difference?

.clientHeight includes padding.

.offsetHeight includes padding, scrollBar and borders.

var clientH = document.getElementById('test').clientHeight;
var offsetH = document.getElementById('test').offsetHeight;


console.log(clientH);
console.log(offsetH);

<div style="height: 30px;" id="test">
  <p>ffffffffff</p>
  <p>gggggggggg</p>
  <p>aaaaaaaaaa</p>
  <p>dddddddddd</p>
</div>

Answer 3

Try this:

window.getComputedStyle(document.getElementById('test')).height

Answer 4

try:

var test = document.getElementById('test');
alert(test.clientHeight);

Answer 5

Try this.

var offsetHeight = document.getElementById('test').offsetHeight;