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

Genauer Zugriff auf die Anzeigeeigenschaft von DOM-Elementen

Das Abrufen der Anzeigeeigenschaft von DOM-Elementen kann einfach erscheinen, es können jedoch unerwartete Ergebnisse auftreten. Betrachten Sie das folgende Beispiel:

var a = (document.getElementById('a')).style;
alert(a.display);

Diese Warnung zeigt möglicherweise eine leere Zeichenfolge anstelle des erwarteten Werts „none“ an. Warum passiert das?

Das Problem liegt im Unterschied zwischen dem CSS-Attributwert und dem angewendeten Stil.

CSS-Attributwert vs. angewandter Stil

Die .style.*-Eigenschaften, einschließlich .display, werden dem CSS-Attributwert zugeordnet, nicht dem angewendeten Stil. Der angewendete Stil spiegelt das Ergebnis der CSS-Kaskadierung wider und kann vom Attributwert abweichen.

Im gegebenen Beispiel ist die Anzeigeeigenschaft des Elements „a“ im CSS-Attributstil auf „none“ gesetzt:

a {
  display: none;
}

Der angewendete Stil kann jedoch aufgrund externer Stylesheets oder dynamischer Änderungen unterschiedlich sein.

Verwendung getComputedStyle

Um den angewendeten Stil korrekt abzurufen, verwenden Sie die Methode getComputedStyle(). Es nimmt ein Element als Argument und gibt ein CSSStyleDeclaration-Objekt zurück, das die berechneten CSS-Stile enthält.

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

Alternativer Ansatz: Klassenumschaltungen

Erwägen Sie alternativ die Verwendung CSS-Klassen zum Umschalten der Sichtbarkeit von Elementen. Dieser Ansatz trennt die Präsentation von der Logik und vermeidet die Notwendigkeit, CSS-Attribute direkt zu manipulieren.

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

Durch die Verwendung von getComputedStyle oder Klassenumschaltungen können Sie genau auf die Anzeigeeigenschaft von DOM-Elementen zugreifen und diese steuern.

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