Wie kann ich die Anzeigeeigenschaft eines DOM-Elements in JavaScript genau abrufen?

Abrufen der Anzeigeeigenschaft eines DOM-Elements

Das Dokument skizziert eine HTML-Struktur, die zwei Elemente mit unterschiedlichen Anzeigeeigenschaften und ein interagierendes JavaScript-Skript enthält mit ihnen. Das Skript versucht, die Anzeigeeigenschaft jedes Elements abzurufen, stößt jedoch auf unerwartete Ergebnisse. Beim Anzeigen der Werte mithilfe der .style.*-Eigenschaften von JavaScript werden leere Zeichenfolgen anstelle der erwarteten Werte „none“ und „block“ beobachtet. Dies führt zu einer Abfrage der richtigen Methode zum genauen Abrufen der Anzeigeeigenschaft.

Die wichtigste Erkenntnis liegt im Verständnis des Unterschieds zwischen dem Stilattribut und dem angewendeten Stil. Die .style.*-Eigenschaften in JavaScript werden direkt dem Stilattribut zugeordnet, einer dynamischen Eigenschaft, die in den Inline-Stilen eines HTML-Elements vorhanden ist. Der angezeigte oder angewendete Stil wird jedoch häufig von Faktoren wie CSS-Regeln, Vererbung und Benutzerpräferenzen beeinflusst. Um den angewendeten Stil abzurufen, muss man die Methode getComputedStyle() verwenden.

Wenn man beispielsweise die folgende CSS-Regel anwenden würde:

<code class="css">a {
    display: inline;
}</code>

Die .style.display-Eigenschaft für Ein Ankerelement würde immer noch „none“ (den Inline-Wert) zurückgeben, auch wenn das Element aufgrund der CSS-Regel inline erscheint. Dies liegt daran, dass die .style.*-Eigenschaften nur die Inline-Stilattribute widerspiegeln, nicht den angewendeten Stil.

Um den angewendeten Stil abzurufen, muss man die Methode getComputedStyle() verwenden, da sie Zugriff auf alle berechneten und bietet kaskadierte Stile, einschließlich solcher, die durch Benutzereinstellungen und die Stil-Engine des Browsers definiert werden. Hier ist ein Beispiel:

<code class="javascript">var a = (document.getElementById('a'));
var display = window.getComputedStyle(a).display;
alert(display); // Will output "inline"</code>

Als Best Practice ist es ratsam, die Darstellung von der Logik zu trennen, indem Sie .className umschalten, anstatt Stileigenschaften direkt zu ändern. Dieser Ansatz fördert Modularität, Wartbarkeit und Wiederverwendbarkeit des Codes.

Das obige ist der detaillierte Inhalt vonWie kann ich die Anzeigeeigenschaft eines DOM-Elements in JavaScript genau abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!