Wie misst man die Höhe versteckter Divs in JavaScript?

Ermitteln der Höhe versteckter Divs: Eine Problemumgehung

Oft ist es notwendig, die Höhe eines Divs zu messen, selbst wenn das übergeordnete Element vorhanden ist auf „display:none“ setzen. Dies kann eine Herausforderung sein, da die OffsetHeight des untergeordneten Divs 0 zurückgibt.

Erster Ansatz

Eine untersuchte Lösung besteht darin, die untergeordneten Knoten des ausgeblendeten übergeordneten Elements zu kopieren in ein sichtbares Div auf der Seite. Anschließend kann die Höhe dieser Elemente gemessen werden, bevor die Knoten entfernt werden. Dieser Ansatz kann jedoch komplex sein und ist möglicherweise nicht in allen Fällen durchführbar.

Verbesserte Lösung

Ein robusterer Ansatz besteht darin, eine Bibliothek wie YUI 2 zur Identifizierung zu verwenden versteckte Elemente (mit „display:none“ oder Höhe und Breite von 0) und machen sie sichtbar. Beginnend mit dem betreffenden untergeordneten Element werden alle Vorfahren durchlaufen und sichtbar gemacht, bis ein sichtbares übergeordnetes Element gefunden wird. Dadurch können die Abmessungen des untergeordneten Elements gemessen werden. Sobald alle Elemente gemessen wurden, werden ihre ursprünglichen Anzeigewerte wiederhergestellt.

Überlegungen

Es ist wichtig zu beachten, dass das Sichtbarmachen ausgeblendeter Elemente das Seitenlayout und die Sichtbarkeit von Inhalten beeinträchtigen kann. Es ist wichtig sicherzustellen, dass dies nur für einen sehr kurzen Zeitraum geschieht und das Benutzererlebnis nicht beeinträchtigt.

Außerdem ist beim Kopieren von Elementen aus ihrer ursprünglichen übergeordneten Hierarchie Vorsicht geboten. Stile werden möglicherweise nicht richtig angewendet, wenn Elemente von ihrem übergeordneten Kontext getrennt werden.

Das obige ist der detaillierte Inhalt vonWie misst man die Höhe versteckter Divs in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!