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

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!