how to get and set div.class height

Question

Please suggest me any way to get and update the height of a HTML element in typescript.

document.getElementsByClassName('height').style.height = childHeight;

is not working. I get

Property 'style' does not exist on type 'HtmlCollectionOf<Element>'

Answer 1

One problem here might be that getElementsByClassName returns an array of elements with class height. To apply style method you need to have one element.

This code will apply 10px height to the first such element:

document.getElementsByClassName('height')[0].style.height = '10px';

Answer 2

First, the code you are after:

const cnElems = document.getElementsByClassName("cn");

for (let i = 0; i < cnElems.length; i++) {
    const e = cnElems[i];
    if (e instanceof HTMLElement) {
        e.style.height = "10px";
    }
}

Then, an explanation... There are two main obstacles here:

• getElementsByClassName returns a HTMLCollection<Element>
  for older targets and browsers this collection needs to be enumerated with an old-school for loop. For newer targets (>= ES6) and browsers, see this answer.
• the elements of the collection are of type Element but style is defined on HTMLElement. Luckily TS automatically narrows a type in the scope of a type guard.