Warum gibt „this.style[property]' von JavaScript eine leere Zeichenfolge zurück?

This.style[property] von JavaScript gibt eine leere Zeichenfolge zurück: Ursache und Lösung aufdecken

Beim Zugriff auf this.style[property] Wenn Sie in JavaScript eine Eigenschaft verwenden, kann es vorkommen, dass anstelle des erwarteten Werts eine leere Zeichenfolge abgerufen wird. Dies kann verwirrend sein, insbesondere wenn Sie versuchen, festgelegte Stileigenschaften abzurufen.

Verstehen des Problems

this.style[property] ist dafür konzipiert Greifen Sie auf Stile zu, die dem Element direkt in seinem HTML-Code oder über Inline-Stile zugewiesen wurden. Wenn die angeforderte Eigenschaft nicht explizit für das Element festgelegt wurde, gibt this.style[property] eine leere Zeichenfolge zurück.

Der Fall kaskadierender Stile

Oft Stile für Elemente werden in CSS-Stylesheets definiert. Diese Stile sind kaskadiert, das heißt, sie werden auf der Grundlage spezifischer Regeln vererbt und überschrieben. Wenn ein Element mit mehreren Stylesheet-Regeln übereinstimmt, hat die spezifischste Regel Vorrang.

Im bereitgestellten Beispiel sind für das #test-Element zwei Stile im Stylesheet definiert: height: 100px; und Breite: 100px;. Das Element verfügt jedoch auch über einen Inline-Hintergrundstil: #CCC;, der die Stylesheet-Regel #test für den Hintergrund außer Kraft setzt.

Aufgrund der kaskadierenden Natur von CSS sind this.style[width] und this.style [height] ruft leere Zeichenfolgen ab, da diese Eigenschaften im Stylesheet festgelegt, aber vom Inline-Stil überschrieben wurden.

Die Lösung: getComputedStyle()

Um den effektiven Stileigenschaftswert abzurufen, der die kaskadierten Stile enthält, können Sie die Methode getComputedStyle() verwenden:

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

getComputedStyle() gibt ein Objekt zurück Dies stellt den berechneten Stil des angegebenen Elements dar und berücksichtigt alle angewendeten Stile, einschließlich geerbter und überschriebener Eigenschaften.

Das obige ist der detaillierte Inhalt vonWarum gibt „this.style[property]' von JavaScript eine leere Zeichenfolge zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!