Warum gibt element.style.display eine leere Zeichenfolge zurück, wenn Stile in CSS definiert sind?

Verstehen des Verhaltens der element.style-Eigenschaft in JavaScript

Die element.style-Eigenschaft in JavaScript verhält sich anders, wenn Sie Stile in CSS definieren als Legen Sie sie direkt über das Stilattribut des Elements fest.

Wenn Sie Stile in CSS zuweisen, gibt element.style eine leere Zeichenfolge für Eigenschaften wie Anzeige zurück. Dies liegt daran, dass auf das Element keine Inline-Stile angewendet wurden und die Style-Eigenschaft in CSS alle Inline-Stile überschreibt.

Wenn Sie die Style-Eigenschaft jedoch direkt über das Element festlegen, gibt element.style die zurück Wert, den Sie festlegen.

Grund für die leere Anzeigeeigenschaft

Der Grund für die leere Anzeigeeigenschaft in CSS ist, dass die Anzeigeeigenschaft des Elements von seinem übergeordneten Element oder geerbt wird die standardmäßigen CSS-Stilregeln. Im bereitgestellten Beispiel ist die Anzeigeeigenschaft im CSS auf Block gesetzt, aber das Element selbst legt die Anzeigeeigenschaft nicht explizit fest.

Wenn Sie also auf die Eigenschaft element.style.display zugreifen, wird diese zurückgegeben eine leere Zeichenfolge, da auf das Element kein Inline-Stil angewendet wird und der vom CSS geerbte Stil nicht über element.style zugänglich ist.

Von CSS angewendete Stile abrufen

Wenn Sie die von CSS angewendeten Stile abrufen müssen, können Sie die Methode window.getComputedStyle() verwenden. Diese Methode gibt ein Objekt zurück, das die berechneten Stilwerte für ein Element darstellt, einschließlich Stilen, die von übergeordneten Elementen geerbt und über kaskadierende Stylesheets angewendet wurden.

Zum Beispiel:

const displayValue = window.getComputedStyle(document.getElementById('test')).display;

In diesem Fall: displayValue enthält den im CSS angegebenen „Block“-Wert, auch wenn element.style.display eine leere Zeichenfolge zurückgibt.

Inline-CSS vs. externes CSS

Auch wenn Inline-CSS nicht als bewährte Methode für Codemodularität und Wartbarkeit gilt, sollten Sie sich dennoch des unterschiedlichen Verhaltens von Inline- und externen Stilen bewusst sein, wenn Sie mit der Eigenschaft element.style arbeiten.

Wenn Sie dieses Verhalten verstehen, können Sie dies tun Rufen Sie Stile in JavaScript-Anwendungen genau ab oder ändern Sie sie und trennen Sie effektiv die Belange von HTML-, CSS- und JavaScript-Code.

Das obige ist der detaillierte Inhalt vonWarum gibt element.style.display eine leere Zeichenfolge zurück, wenn Stile in CSS definiert sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!