Wie kann ich die Elementsichtbarkeit im DOM nur mithilfe von JavaScript bestimmen?

Bestimmen der Elementsichtbarkeit im DOM mit reinem JavaScript

Frage:

Können wir bestimmen? ob ein Element im DOM sichtbar ist, ohne auf jQuery angewiesen zu sein? Welche Attribute sollten wir insbesondere überprüfen, um seine Sichtbarkeit sicherzustellen?

Antwort:

Laut MDN-Dokumentation gibt die offsetParent-Eigenschaft eines Elements null zurück, wenn es oder einer seiner Vorgänger vorhanden ist werden über die Anzeigestil-Eigenschaft ausgeblendet. Dies setzt jedoch voraus, dass das Element nicht fest positioniert ist. Wenn auf der Seite keine Position: Fixed-Elemente vorhanden sind, könnte ein prägnantes Skript zur Überprüfung der Sichtbarkeit lauten:

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

Wenn es auf der Seite jedoch Position: Fixed-Elemente gibt, müssen wir leider auf Fenster zurückgreifen .getComputedStyle() für eine gründliche Prüfung, die Auswirkungen auf die Leistung haben kann:

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

Trotz ihrer Anfälligkeit für Randfälle bietet die zweite Option mehr Klarheit. Wenn der Vorgang wiederholt ausgeführt werden soll, ziehen Sie aus Effizienzgründen die erste Option in Betracht und vermeiden Sie die Leistungseinbußen von window.getComputedStyle().

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