Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-06 11:01:02
Original
231 Leute haben es durchsucht

Why does `element.style` return an empty value for styles defined in CSS?

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>
Nach dem Login kopieren
#test {
  display: block;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage