Warum gibt „element.style' einen leeren Wert für in CSS definierte Stile zurück?

JavaScript-Stilattribut-Diskrepanz

F: Warum gibt element.style bei der Definition der Anzeige immer einen leeren Wert zurück? in CSS, obwohl das Element den Stil erbt?

A: Die Eigenschaft element.style ruft Inline-Stile ab, die direkt auf ein Element im HTML-Dokument angewendet werden. In CSS definierte Stile gelten nicht als Inline-Stile und werden daher von element.style nicht wiedergegeben.

Der berechnete Stil:

JavaScript stellt window.getComputedStyle() bereit. Funktion, um den tatsächlichen effektiven Stil zu erhalten, der auf ein Element angewendet wird. Diese Funktion verwendet ein Element als Eingabe und gibt ein ComputedStyle-Objekt zurück, das die berechneten Werte für alle CSS-Eigenschaften enthält.

Beispiel:

Bedenken Sie den folgenden Code:

<div>

#test {
  display: block;
}

Der Zugriff auf document.getElementById('test').style.display gibt eine leere Zeichenfolge zurück, während window.getComputedStyle(document.getElementById('test')).display korrekt „Block“ zurückgibt.

Fazit:

Um die angewendeten CSS-Stile für ein Element zu erhalten, ist es notwendig, window.getComputedStyle() zu verwenden. Durch die Verwendung von element.style werden nur Inline-Stile abgerufen, die normalerweise nicht für Elemente mit externem CSS festgelegt werden.

Das obige ist der detaillierte Inhalt vonWarum gibt „element.style' einen leeren Wert für in CSS definierte Stile zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!