javascript - document.getElementsByClassName doesn't work

Question

function getHeight(element) {
    console.log(element);
    var offsetHeight = document.getElementsByClassName(element).offsetHeight;
    console.log(offsetHeight);
}
getHeight("card-1");

Although it correctly prints the element to the console with just document.getElementsByClassName(element) but I can't get to the offsetHeight property, even with document.getElementsByClassName(element)[0].offsetHeight

Do I have to run a loop?

Answer 1

document.getElementsByClassName(element) returns a HTMLCollection of elements. The collection doesn' t have an offsetHeight property, each element in the collection has.

Now if you want to get the offsetHeight of the first matched element you can simply use
document.getElementsByClassName(element)[0].offsetHeight

If you wanted the max or min offsetHeight of all the matched elements you'd need to iterate over the collection.