Realmente necesito ayuda para resolver este error. Escribí el siguiente código JavaScript a continuación para permitir que mi indicador de pestaña se muestre en una pestaña en la que se hizo clic cuando se hizo clic en ella, pero todo lo que recibo es un error que dice: "La propiedad 'estilo' no existe en el tipo 'Elemento'". Las pestañas funcionan perfectamente bien, puedo cambiar de una pestaña a otra. He visto preguntas similares, pero mi problema no se resolvió siguiendo sus sugerencias principales. Actualmente estoy construyendo un proyecto angular y escribí mi JavaScript en la función ngInit(){} en mi archivo .ts. El código está abajo:
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); }¿Qué hice mal? ¿Alguna idea sobre cómo resolver esto?
getElementsByClassName devuelve una HTMLCollectionOf<Element> . No hay una propiedad de style en el tipo de elemento y, por lo tanto, el error.
Puede escribirlo en la colección de HTMLElement y eso debería resolver el problema:
_class(name: any): HTMLCollectionOf<HTMLElement> { return document.getElementsByClassName(name) as HTMLCollectionOf<HTMLElement>; }PD: aunque lo anterior debería resolver el error de mecanografiado, pero como Eliseo mencionó en uno de los comentarios, puede utilizar el enlace de eventos Angular y el enlace de propiedades al atributo de clase para hacerlo de manera Angular.
Cambie el método _class a: -
_class(name: any): NodeList<HTMLElement> { return document.getElementsByClassName(name) as NodeList<HTMLElement>; }