Wie kann ich mit reinem JavaScript die Elementsichtbarkeit im DOM genau bestimmen?

Sichtbarkeitserkennung im DOM

Bei der Arbeit mit Elementen im Document Object Model (DOM) ist es oft notwendig, zu bestimmen, ob ein Element ist sichtbar. In reinem JavaScript, ohne die Verwendung von Bibliotheken wie jQuery, erfordert die Überprüfung der Sichtbarkeit eine genauere Untersuchung bestimmter HTML-Attribute.

Um die Sichtbarkeit eines Elements zu bestimmen, berücksichtigen Sie die folgenden Attribute:

• display: Dieses Attribut legt das Anzeigeverhalten eines Elements fest. Wenn es auf „none“ gesetzt ist, ist das Element ausgeblendet.
• Sichtbarkeit: Dieses Attribut steuert die Sichtbarkeit eines Elements und ermöglicht, dass es ausgeblendet oder sichtbar ist.

In dem angesprochenen Problem hat der Benutzer versucht, window.getComputedStyle(my_element)['display']) zu verwenden, um die Sichtbarkeit zu überprüfen, was jedoch nicht der Fall war genau.

Es ist jedoch ein alternativer Ansatz verfügbar, um die Sichtbarkeit von Elementen mithilfe der Eigenschaft offsetParent zu überprüfen. Wenn die Anzeigeeigenschaft eines Elements oder eines seiner übergeordneten Elemente auf „none“ festgelegt ist, ist sein offsetParent null. Hiermit kann festgestellt werden, ob ein Element sichtbar ist oder nicht.

Für Elemente ohne feste Positionierung kann folgende Funktion verwendet werden:

function isHidden(el) {
    return (el.offsetParent === null);
}

Für Elemente mit fester Positionierung eine weitere Der genaue Ansatz besteht darin, window.getComputedStyle() zu verwenden, das mehr Randfälle berücksichtigt.

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

Diese Methode ist umfassender, aber langsamer als die vorherige. Wenn es auf die Geschwindigkeit ankommt, verwenden Sie nach Möglichkeit am besten die Eigenschaft offsetParent.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem JavaScript die Elementsichtbarkeit im DOM genau bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!