Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum ist „element.style.display' leer, auch wenn ich CSS-Regeln habe?

Susan Sarandon
Freigeben: 2024-11-07 01:20:02
Original
877 Leute haben es durchsucht

Why is `element.style.display` Empty Even When I Have CSS Rules?

Warum CSS-Stileigenschaften mit getElementById().style leer bleiben

Wenn Sie getElementById() verwenden, um ein HTML-Element abzurufen und darauf zuzugreifen Die Stileigenschaft über element.style.display gibt oft einen leeren Wert zurück, obwohl eine CSS-Stilregel wie #map {display:block} vorhanden ist.

Dieses Verhalten tritt auf, weil element.style nur die Inline-Stile explizit widerspiegelt wird für das Element im HTML-Dokument festgelegt. Wenn keine Inline-Stile definiert sind, ist element.style leer.

Um auf den tatsächlich berechneten Stil eines Elements zuzugreifen, der sowohl Inline-Stile als auch CSS-Regeln enthält, verwenden Sie die Methode window.getComputedStyle(). Diese Methode stellt ein Style-Objekt bereit, das den vollständigen auf das Element angewendeten Stil darstellt.

Beim Aufruf von console.log(window.getComputedStyle(document.getElementById('test')).display) wird beispielsweise „block, " spiegelt die #map {display: block}-Regel wider.

Obwohl vom Inline-Styling im Allgemeinen zugunsten von CSS abgeraten wird, ist das Verständnis der Unterscheidung zwischen element.style und window.getComputedStyle() entscheidend für den genauen Zugriff auf Elementstile in JavaScript.

Das obige ist der detaillierte Inhalt vonWarum ist „element.style.display' leer, auch wenn ich CSS-Regeln habe?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!