Warum gibt „element.style' „Leer' zurück, wenn Stile in einer externen CSS-Datei definiert werden?

Verstehen, warum element.style leer zurückgibt

In JavaScript gibt die Eigenschaft element.style normalerweise die Inline-Stilattribute zurück, die direkt auf ein Element angewendet werden im HTML-Dokument. Allerdings ist der Inline-Stil nicht der bevorzugte Ansatz für Styling-Elemente, da er zu Code-Inkonsistenzen und Problemen bei der Wartbarkeit führen kann.

Das Problem tritt jedoch auf, wenn Sie Stile explizit in einer externen CSS-Datei definieren und dann versuchen, auf diese zuzugreifen Stile mit element.style. In diesem Fall gibt element.style immer ein leeres Objekt zurück, was Sie verwirrt.

Inline vs. berechnete Stile

Um dieses Verhalten zu verstehen, ist es wichtig, es zu verstehen die Unterscheidung zwischen Inline- und berechneten Stilen. Inline-Stile beziehen sich auf die Stilattribute, die direkt auf ein Element im HTML-Dokument angewendet werden, während berechnete Stile die Kombination aller anwendbaren Stile aus jeder anwendbaren Quelle darstellen, einschließlich der Inline-Stile, CSS-Stylesheets und Benutzeragenten-Stile.

JavaScript kann CSS-Stile nicht direkt lesen

JavaScript allein ist nicht in der Lage, CSS-Stile direkt zu lesen. Stattdessen verlässt es sich auf die Rendering-Engine des Browsers, die die berechneten Stile basierend auf den Kaskadenregeln von CSS berechnet.

Wenn Sie also auf element.style zugreifen, greifen Sie nur auf die Inline-Stile zu, die in fehlen Ihren Fall, da Sie Stile in einer externen CSS-Datei bereitgestellt haben. Um die berechneten Stile zu erhalten, die sowohl Inline- als auch externe CSS-Stile umfassen, müssen Sie die Funktion window.getComputedStyle(element) verwenden.

Lösung: Verwendung von getComputedStyle

In Ihrem Szenario liefert die Funktion getComputedStyle das gewünschte Ergebnis:

console.log(window.getComputedStyle(document.getElementById('test')).display);

Diese Codezeile protokolliert den Wert von die Anzeigeeigenschaft, wie sie in Ihrer CSS-Datei definiert ist, auch wenn element.style.display eine leere Zeichenfolge zurückgibt.

Die wichtigste Erkenntnis ist also, dass element.style spezifisch für Inline-Stile ist, während window.getComputedStyle den Zugriff ermöglicht sowohl auf Inline- als auch auf externe CSS-Stile, was Sie benötigen, um Stilinformationen genau abzurufen.

Das obige ist der detaillierte Inhalt vonWarum gibt „element.style' „Leer' zurück, wenn Stile in einer externen CSS-Datei definiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!