Sometimes, we want to get height of the highest children element in JavaScript.

In this article, we’ll look at how to get height of the highest children element in JavaScript.

How to get height of the highest children element in JavaScript?

To get height of the highest children element in JavaScript, we can select all the elements with querySelectorAll.

Then we can use the clientHeight property to get the height of each element.

For instance, we write:

<div style='height: 200px'>
  foo
</div>
<div>
  bar
</div>
<div style='height: 300px'>
  ba
</div>

to add some divs.

Then we get the height of the tallest div with:

const [tallest] = [...document.querySelectorAll('div')]
.sort((a, b) => b.clientHeight - a.clientHeight)
console.log(tallest.clientHeight)

We select all the divs with querySelectorAll.

Then we spread them into an array.

Next, we call sort to sort the divs by their height in descending order.

We get the height with the clientHeight property.

Then we get the tallest div with destructuring.

Therefore, tallest.clientHeight is 300 pixels according to the log.

Conclusion

To get height of the highest children element in JavaScript, we can select all the elements with querySelectorAll.

Then we can use the clientHeight property to get the height of each element.