close

[Solved] TS2339: Property ‘style’ does not exist on type ‘Element’

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error TS2339: Property ‘style’ does not exist on type ‘Element’ in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve TS2339: Property ‘style’ does not exist on type ‘Element’ Error ?

  1. How To Solve TS2339: Property 'style' does not exist on type 'Element' Error?

    To Solve TS2339: Property 'style' does not exist on type 'Element' Error use querySelectorAll and a type parameter. getElementsByClassName is not generic, but querySelectorAll is – you can just pass the type of the elements that will be selected, like this

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

    To Solve TS2339: Property 'style' does not exist on type 'Element' Error use querySelectorAll and a type parameter. getElementsByClassName is not generic, but querySelectorAll is – you can just pass the type of the elements that will be selected, like this

Solution 1

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 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.

Solution 2

Another option is to use querySelectorAll and a type parameter. getElementsByClassName is not generic, but querySelectorAll is – you can just pass the type of the elements that will be selected, like this:

const test = document.querySelectorAll<HTMLElement>('.mat-form-field-infix');

This doesn’t require any type casting, and it will allow you to use forEach immediately, rather than converting it to an array first. (getElementsByClassName returns an HTMLCollection, which does not have a forEach method; querySelectorAll returns a NodeList, which does have a forEach method, at least on somewhat up-to-date browsers. To support ancient browsers too, you’ll need a polyfill, or convert it to an array first.)

If you happen to just need a single element, you can use querySelector, which is generic as well:

const elm = document.querySelector<HTMLElement>('.foo')!;
elm.style.padding = '10px';

Another benefit of querySelectorAll (and querySelector) over the many other options is that they accept CSS selector strings, which can be far more flexible and precise. For example, the selector string

.container > input:checked

will select children of <div class="container"> which are <input>s and are checked.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment