TS2339: Eigenschaft „Stil“ existiert nicht für Typ „Element“

Hier ist der 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';
});

Fehler, den ich beim Kompilieren bekomme:

FEHLER in src/app//.component.ts(101,21): Fehler TS2339: Eigenschaft „Stil“ existiert nicht für Typ „Element“. Quelle/app//.component.ts(102,21): Fehler TS2339: Eigenschaft „Stil“ existiert nicht für Typ „Element“.

Wie kann ich es reparieren?

Ich habe versucht, die zu entfernen Array.from... Teil, versucht zu verwenden for of und for inversucht as anyaber oben ist die Art und Weise, wie ich es tun muss.

Sie benötigen eine Typumwandlung:

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

Das ist, weil getElementsByClassName gibt nur zurück HTMLCollection<Element>und Element hat kein styleEigentum. Das HTMLElement jedoch setzt es um über es ist ElementCSSInlineStyle erweiterte Schnittstelle.

Beachten Sie, dass diese Typumwandlung so typsicher ist, wie jede Elementist entweder ein HTMLElement oder ein SVGElementund ich hoffe, dass Ihr SVG-Elemente habe keine klasse.

Eine weitere Option ist die Verwendung querySelectorAll und einen Typparameter. getElementsByClassName ist nicht generisch, aber querySelectorAll is – Sie können einfach den Typ der Elemente übergeben, die ausgewählt werden, wie folgt:

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

Dies erfordert kein Typ-Casting, und es erlaubt Ihnen zu verwenden forEach sofort, anstatt es zuerst in ein Array zu konvertieren. (getElementsByClassName gibt eine HTMLCollection zurück, die kein hat forEach Methode; querySelectorAll gibt a zurück NodeListdie tut haben eine forEach Methode, zumindest auf einigermaßen aktuellen Browsern. Um auch alte Browser zu unterstützen, benötigen Sie eine Polyfilloder konvertieren Sie es zuerst in ein Array.)

Wenn Sie nur ein einzelnes Element benötigen, können Sie verwenden querySelectorwas ebenfalls generisch ist:

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

Ein weiterer Vorteil von querySelectorAll (und querySelector) gegenüber den vielen anderen Optionen ist, dass sie CSS-Selektorzeichenfolgen akzeptieren, die weitaus flexibler und präziser sein können. Zum Beispiel die Auswahlzeichenfolge

.container > input:checked

wird Kinder von auswählen <div class="container"> welche sind <input>s und werden überprüft.

Wenn Sie das äußere HTML festlegen, zerstören Sie das ursprüngliche Element, das dort war. Dein Styling funktioniert also nicht.

Sie werden das bemerken, wenn Sie es ändern, um innerHTML, Ihr Styling, festzulegen tut Arbeit.

Dies macht nicht genau dasselbe, aber ich hoffe, es weist Sie in die richtige Richtung.

const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
    element.innerHTML = '<div class="good-day-today" style="width: 0px;"></div>'; // Please note that this line works fine!
    element.style.padding = '10px';
    element.style.borderTop = '0';
});

Ich war auch mit einem ähnlichen Problem konfrontiert, während ich es tat

document.querySelectorAll(".<className>"); 

Anstatt also die style-Eigenschaft hinzuzufügen, habe ich sie einfach umgangen, indem ich einfach eine weitere Klasse hinzugefügt habe.

Beispiel:

//css file
    .<classname> {
        display: none;
      }
    .<classname>.show {
        display: flex;
      }

//ts file
elements.forEach((ele, index) => {
const errors = something.length;
if (index < errors) {
  ele.classList.add("show");
} else {
  ele.classList.remove("show");
}

}); };

Eine Problemumgehung könnte in etwa so aussehen:

element["style"].padding = '10px';
element["style"].borderTop = '0';

Vielleicht ist es nicht die beste Lösung, aber es sollte funktionieren, ich habe es mehrmals verwendet 🙂

Ich glaube, ich habe eine einfachere Methode gefunden:

Erstellen Sie einfach eine index.d.ts-Datei und fügen Sie hinzu:

interface Element {
    style: CSSStyleDeclaration
}

Vielleicht könnte das helfen:

let element = <HTMLElement> document.getElementsByClassName(className)[0];