我该如何解决“属性'样式'不存在类型'元素'错误？

Question

I really need help to solve this error. I wrote the following JavaScript code below to enable my tab indicator to show on a clicked tab when clicked on but all I am getting is an error which says: "Property 'style' doesn't exist on type 'Element'". The tabs work perfectly fine, I can switch from one tab to the other. I have seen similar questions but my issue wasn't resolved following their lead suggestions. I am currently building an angular project and i wrote my JavaScript in the ngInit(){} function in my .ts file. The code is below:

ngOnInit() {
    let tabPanes = this._class('tab-header')[0].getElementsByTagName('div');

    for (let i = 0; i < tabPanes.length; i++) {
      tabPanes[i].addEventListener('click', () => {
        this._class('tab-header')[0]
          .getElementsByClassName('active')[0]
          .classList.remove('active');
          tabPanes[i].classList.add("active");

          this._class('tab-indicator')[0].style.top = 'calc(80px + ${i*50}px)'; // This flags a "property 'style' doe not exist on type 'Element'" error.

          this._class('tab-content')[0]
          .getElementsByClassName('active')[0]
          .classList.remove('active');

          this._class('tab-content')[0]
          .getElementsByTagName('div')[i]
          .classList.add('active');
      });
    }
  }

_class(name: any) {
    return document.getElementsByClassName(name);
  }

Answer 1

getElementsByClassName<\/code> returns an HTMLCollectionOf<Element><\/code> . There is no style<\/code> property on Element type and hence the error.

_class(name: any): HTMLCollectionOf<HTMLElement> {
    return document.getElementsByClassName(name) as HTMLCollectionOf<HTMLElement>;
}

Answer 2

Change _class method to :-

_class(name: any): NodeList<HTMLElement> {
    return document.getElementsByClassName(name) as NodeList<HTMLElement>;
  }