Wie kann ich den CSS-Anzeigestatus eines Elements mithilfe von JavaScript überprüfen?

Bestimmen des CSS-Anzeigestatus von Elementen mit JavaScript

In der Webentwicklung ist es oft notwendig, die CSS-Eigenschaften von Elementen dynamisch zu manipulieren oder zu überprüfen. Ein Aspekt, dessen Überprüfung nützlich sein kann, ist der Anzeigestatus eines Elements, insbesondere ob es sichtbar (Anzeige auf „Blockieren“ eingestellt) oder ausgeblendet (Anzeige auf „Keine“ eingestellt) ist.

Verwenden von JavaScript zur Überprüfung Elementanzeige

Um die CSS-Anzeigeeigenschaft eines Elements mit JavaScript zu überprüfen, können Sie zwei Hauptmethoden verwenden:

1. Überprüfen des berechneten Stils:

Diese Methode eignet sich für Elemente, deren Anzeigeeigenschaften geerbt oder in CSS-Regeln angegeben werden. Um den berechneten Stil zu erhalten, können Sie den folgenden Code verwenden:

const element = document.getElementById('element-id');
const computedStyle = window.getComputedStyle(element, null);
const displayStyle = computedStyle.display;

2. Überprüfen des Inline-Stils:

Wenn der Stil inline oder mit JavaScript deklariert wurde, können Sie wie folgt direkt auf die Stileigenschaft des Elements zugreifen:

const element = document.getElementById('element-id');
const displayStyle = element.style.display;

Bestimmen Anzeigestatus:

Sobald Sie den displayStyle haben, können Sie eine bedingte Anweisung verwenden, um zu bestimmen, ob das Element sichtbar ist oder versteckt:

if (displayStyle === 'block') {
  // Element is visible
} else if (displayStyle === 'none') {
  // Element is hidden
}

Das obige ist der detaillierte Inhalt vonWie kann ich den CSS-Anzeigestatus eines Elements mithilfe von JavaScript überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!