Wie kann ich die Sichtbarkeit von DOM-Elementen in einfachem JavaScript überprüfen?

Elementsichtbarkeit im DOM prüfen

Frage:

Können wir mit bestimmen, ob ein Element im DOM sichtbar ist? JavaScript ohne auf externe Bibliotheken wie jQuery angewiesen zu sein? Wenn ja, welche Attribute sollten wir berücksichtigen, um genaue Sichtbarkeitsprüfungen sicherzustellen?

Antwort:

Um die Elementsichtbarkeit in reinem JavaScript zu überprüfen, berücksichtigen Sie die folgenden Attribute:

• Anzeige: Elemente mit dem „Anzeige“-Stil „keine“ werden berücksichtigt versteckt.
• Sichtbarkeit: Versteckte Elemente haben den „Sichtbarkeits“-Stil „versteckt“.

Um zu überprüfen, ob ein Element sichtbar ist, können Sie die verwenden Folgender Code:

function isElementVisible(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden";
}

Dieser Ansatz funktioniert in den meisten Fällen. Wenn Ihre Seite jedoch Elemente mit „position: Fixed“ enthält, müssen Sie möglicherweise einen umfassenderen Ansatz verwenden, der auch nach Elementen außerhalb des normalen Dokumentflusses sucht. In solchen Fällen können Sie Folgendes verwenden:

function isElementVisibleFixed(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden" or "position: fixed"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden" && style.position !== "fixed";
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeit von DOM-Elementen in einfachem JavaScript überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!