How to Get Element Height in Javascript

In this article, you will learn how to get an element's height in javascript. I will explain two methods to get the height of an element.

[1] Using the offsetHeight property.

The offsetHeight property returns the height of an element including its padding, border etc..

The following example will return 23 which is equal to the original height plus the vertical border.

<span style="border:5px solid red" id="out">
  This is a span element.
</span>
<script>
  let textHeight = document.getElementById("out");
  document.write(textHeight.offsetHeight)
</script>

[2] Using the getBoundingClientRect() method.

The getBoundingClientRect() method returns a DOMRect object which has a height property.

For example, the below code will return 22.90 which is equal to the current height plus the vertical border of the <span> element.

<span style="border:2px solid red;" id="out">
  This is a span element.
</span>
<script>
  let textHeight = document.getElementById("out").getBoundingClientRect()
  document.write(textHeight.height)
</script>