Here's the code:
const test = Array.from(document.getElementsByClassName('mat-form-field-infix')); test.forEach((element) => { element.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>'; // 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<HTMLElement>)
That's because getElementsByClassName
only returns HTMLCollection<Element>
, and Element
does not have a style
property. The HTMLElement
however does implement it via it's ElementCSSInlineStyle
extended interface.
Note that this typecast is typesafe in the way that every Element
is either a HTMLElement
or an SVGElement
, and I hope that your SVG Elements don't have a class.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With