jQuery: Wie überprüft man, ob ein Element ausgeblendet ist? (Erklärung für Anfänger)

Einleitung: Warum diese Frage jeden Frontend-Entwickler beschäftigt

Stellen Sie sich vor: Sie schreiben eine interaktive Seite mit einem Dropdown-Menü, einem modalen Fenster oder einem Akkordeon. Der Benutzer klickt auf eine Schaltfläche, und der Block soll sanft erscheinen oder verschwinden. Aber was, wenn Sie versehentlich versuchen, ein bereits ausgeblendetes Element zu animieren? Oder umgekehrt, etwas anzeigen, das bereits sichtbar ist? Das Ergebnis sind Fehler, eine ruckelnde Benutzeroberfläche und enttäuschte Benutzer.

Deshalb ist die Frage "How do I check if an element is hidden in jQuery?" eine der beliebtesten auf Stack Overflow. Es gibt über tausend Antworten darauf, und das ist kein Zufall. Die Fähigkeit, die Sichtbarkeit eines Elements korrekt zu bestimmen, ist eine grundlegende Fähigkeit, die Ihnen Stunden beim Debuggen spart.

In diesem Artikel werden wir im Detail besprechen, wie Sie mit jQuery überprüfen können, ob ein Element ausgeblendet ist. Sie erfahren mehr über Fallstricke, die Unterschiede zwischen display:none und visibility:hidden und lernen, zuverlässigen Code zu schreiben. Los geht's!

Die Methode .is(':hidden') – Ihr wichtigstes Werkzeug

Der einfachste und gebräuchlichste Weg, um zu überprüfen, ob ein Element ausgeblendet ist, ist die Verwendung der Methode .is() mit dem Pseudo-Selektor :hidden. jQuery bietet dies von Haus aus an.

Wie es funktioniert

Der Selektor :hidden in jQuery wählt Elemente aus, die:

\n
• Die CSS-Eigenschaft display: none haben;
\n
• Elemente vom Typ <input type="hidden"> sind;
\n
• Eine Breite und Höhe von Null haben (z. B. width: 0; height: 0);
\n
• Nachkommen eines ausgeblendeten Elternelements sind (die Unsichtbarkeit erben).
\n

So sieht eine einfache Überprüfung aus:

// Überprüfen, ob das Element mit der ID "myDiv" ausgeblendet ist\nif ($('#myDiv').is(':hidden')) {\n    console.log('Element ist ausgeblendet!');\n} else {\n    console.log('Element ist sichtbar.');\n}

Sichtbarkeitsprüfung mit .is(':visible')

Für die umgekehrte Logik verwenden Sie den Selektor :visible:

if ($('#myDiv').is(':visible')) {\n    console.log('Element ist auf der Seite sichtbar.');\n}

Beide Ansätze arbeiten schnell und sind intuitiv verständlich. Es gibt jedoch eine Nuance: Was ist, wenn das Element mit visibility: hidden oder opacity: 0 ausgeblendet ist? jQuery betrachtet solche Elemente als sichtbar, was für Anfänger oft eine Überraschung ist.

Fallstricke: visibility: hidden und opacity: 0

Viele Entwickler gehen fälschlicherweise davon aus, dass :hidden auf alle Arten des Ausblendens eines Elements reagiert. Das ist nicht der Fall.

Beispiel mit visibility: hidden

Die Eigenschaft visibility: hidden macht ein Element unsichtbar, aber es nimmt weiterhin Platz auf der Seite ein. jQuery betrachtet ein solches Element als sichtbar, da seine Abmessungen nicht Null sind.

<div id="myBox" style="visibility: hidden;">Ich bin unsichtbar, nehme aber Platz ein</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

Beispiel mit opacity: 0

Das Gleiche gilt für die Transparenz:

<div id="transparentBox" style="opacity: 0;">Transparent, aber für jQuery sichtbar</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

Wenn Ihr Code fadeIn()/fadeOut() oder Transparenzanimationen verwendet, wird Sie die Standardprüfung mit :hidden im Stich lassen. In solchen Fällen müssen Sie die spezifische CSS-Eigenschaft überprüfen.

Wie man visibility: hidden oder opacity: 0 überprüft

Wenn Sie wissen müssen, ob ein Element genau mit diesen Eigenschaften ausgeblendet ist, verwenden Sie .css():

Überprüfung der Sichtbarkeit

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('Element ist über visibi