TS2339: Property 'style' does not exist on type 'Element'

Here's the code:

const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
    element.outerHTML = ''; // Please note that this line works fine!
    element.style.padding = '10px';
    element.style.borderTop = '0';
});

Error I get when compiled:


ERROR in src/app//.component.ts(101,21): error TS2339: Property
'style' does not exist on type 'Element'.
src/app//.component.ts(102,21): error TS2339: Property 'style'
does not exist on type 'Element'.

How can I fix it?

I tried to remove the Array.from... part, tried to use for of and for in, tried as any, but above is the way I have to do it.

You need a typecast:

Array.from(document.getElementsByClassName('mat-form-field-infix') as HTMLCollectionOf)

That's because getElementsByClassName only returns HTMLCollection, and Element does not have a styleproperty. The HTMLElement however does implement it via it's ElementCSSInlineStyle extended interface.

Note that this typecast is typesafe in the way that every Elementis either a HTMLElement or an SVGElement, and I hope that your SVG Elements don't have a class.

Stack Overflow Q#58773652, score: 177