Heim > Web-Frontend > js-Tutorial > Wie kann ich die Elementsichtbarkeit in reinem JavaScript bestimmen?

Wie kann ich die Elementsichtbarkeit in reinem JavaScript bestimmen?

Patricia Arquette
Freigeben: 2024-11-28 22:52:11
Original
636 Leute haben es durchsucht

How Can I Determine Element Visibility in Pure JavaScript?

Bestimmen der Elementsichtbarkeit in reinem JavaScript

In Ermangelung von jQuery suchen Entwickler häufig nach Methoden, um festzustellen, ob ein Element im DOM sichtbar ist . Dieser Artikel befasst sich mit dieser Frage und untersucht verschiedene Attribute, die auf Sichtbarkeit oder einen verborgenen Status hinweisen können.

Die Untersuchung des Anzeigeattributs bleibt zwar ein wichtiger Faktor, aber nicht die einzige Überlegung. Das Sichtbarkeitsattribut kann sich auch auf die Sichtbarkeit auswirken und anzeigt, ob ein Element derzeit ausgeblendet ist.

Es können jedoch auch weitere Attribute Aufmerksamkeit erfordern. Laut MDN-Dokumentation gibt die Eigenschaft offsetParent eines Elements null zurück, wenn es oder seine übergeordneten Elemente über den Anzeigestil ausgeblendet werden. Um die Sichtbarkeit unter Ausschluss fester Elemente zu bestimmen, kann das folgende Skript verwendet werden:

function isHidden(el) {
    return (el.offsetParent === null);
}
Nach dem Login kopieren

Feste Elemente erfordern jedoch möglicherweise einen anderen Ansatz, der auf window.getComputedStyle() basiert. Die folgende Funktion berücksichtigt solche Elemente:

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

Während die zweite Option umfassender ist, kann sie rechentechnisch langsamer sein. Daher hängt die optimale Wahl von der Häufigkeit der Operation ab.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage