Wie kann ich die Eigenschaft „display' von DOM-Elementen genau abrufen?

Abrufen der Anzeigeeigenschaft eines DOM-Elements

Sie haben eine Diskrepanz beim Abrufen der „Anzeige“-Eigenschaft von HTML-Elementen festgestellt. Auch wenn Sie zunächst erwarten könnten, dass Sie „none“ oder „block“ erhalten, ist dies nicht der Fall. Lassen Sie uns den zugrunde liegenden Grund untersuchen.

In Ihrem Beispielcode greifen Sie auf die „style“-Eigenschaft der Elementstile zu. Diese Eigenschaften entsprechen jedoch den im Attribut „style“ definierten Inline-Stilen und nicht den berechneten Stilen, die auf die Elemente angewendet werden. Um auf die tatsächlich angewendeten Stile zuzugreifen, sollten Sie stattdessen die Methode „getComputedStyle“ verwenden.

<code class="javascript">var a = document.getElementById('a');
var p = document.getElementById('p');

const aStyle = getComputedStyle(a);
const pStyle = getComputedStyle(p);

alert(aStyle.display);
alert(pStyle.display);</code>

Dieses Snippet zeigt die tatsächlich berechneten „Anzeige“-Eigenschaften der Elemente genau an, die für „none“ sein sollten 'a'-Element und 'block' für das 'p'-Element.

Es ist wichtig, zwischen Stilen zu unterscheiden, die im Attribut „style“ definiert sind, und denen, die vom Browser angewendet werden. Ersteres hat Vorrang vor Letzterem, aber „getComputedStyle“ gibt die Werte der Eigenschaften zurück, die tatsächlich auf die DOM-Elemente angewendet werden.

Erwägen Sie alternativ die Verwendung von CSS-Klassen, um die Anzeigeeigenschaft von Elementen zu verwalten. Dieser Ansatz trennt die Präsentation von der Logik und bietet so mehr Kontrolle und Flexibilität.

Das obige ist der detaillierte Inhalt vonWie kann ich die Eigenschaft „display' von DOM-Elementen genau abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!