So rufen Sie die Display-Eigenschaft eines DOM-Elements genau ab und warum die .style-Eigenschaft möglicherweise leere Zeichenfolgen zurückgibt

Abrufen der Anzeigeeigenschaft eines DOM-Elements: Den wahren Wert enthüllen

Der bereitgestellte HTML-Code führt einen Absatz und einen Anker mit unterschiedlicher Anzeige ein Stile. Das Abrufen dieser Stile über die style-Eigenschaft scheint jedoch zu unerwarteten leeren Zeichenfolgen zu führen. Warum ist das so und wie können Sie die Anzeigeeigenschaft genau abrufen?

Das Rätsel der leeren Zeichenfolge

Die anfängliche Verwirrung entsteht, weil die .style.* Eigenschaften werden direkt dem Stilattribut zugeordnet, nicht dem angewendeten Stil. Dies bedeutet, dass Sie im Wesentlichen die Inline-Stildeklaration überprüfen, die möglicherweise nicht immer den berechneten Stil widerspiegelt.

Die Lösung: getComputedStyle

Um den tatsächlich angewendeten Stil zu erhalten , einschließlich geerbter Eigenschaften, müssen Sie die Methode getComputedStyle verwenden. Diese Methode verwendet ein DOM-Element als Argument und gibt ein CSSStyleDeclaration-Objekt zurück, das berechnete Stilwerte enthält.

Der bereitgestellte Code kann wie folgt geändert werden, um getComputedStyle zu verwenden:

<code class="javascript">var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);</code>

Nun das erste Die Warnung zeigt „none“ für das Ankertag an, die zweite Warnung zeigt „block“ für das Absatzelement an und die dritte Warnung zeigt „none“ nach der absichtlichen Anzeigeeinstellung an. Dies spiegelt genau die berechneten Anzeigestile der Elemente wider.

Alternativer Ansatz: Klassenumschaltung

Anstatt sich auf die Anzeigeeigenschaft zu verlassen, könnten Sie erwägen, Klassennamen zum Umschalten zu verwenden die Sichtbarkeit von Elementen. Indem Sie die Präsentation von der Logik trennen, können Sie Ihren Code vereinfachen und ihn weniger anfällig für Stilprobleme machen.

Das obige ist der detaillierte Inhalt vonSo rufen Sie die Display-Eigenschaft eines DOM-Elements genau ab und warum die .style-Eigenschaft möglicherweise leere Zeichenfolgen zurückgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!