Heim > Web-Frontend > CSS-Tutorial > Wie misst man die Höhe eines versteckten DIV-Elements?

Wie misst man die Höhe eines versteckten DIV-Elements?

Linda Hamilton
Freigeben: 2024-10-29 04:32:29
Original
641 Leute haben es durchsucht

How to Measure the Height of a Hidden DIV Element?

Höhe ausgeblendeter DIVs messen

Wenn ein DIV-Element mithilfe des display: none-Attributs ausgeblendet wird, wird seine offsetHeight-Eigenschaft zu Null, wodurch es schwierig, seine wahre Höhe zu bestimmen. Um diese Herausforderung zu meistern, gibt es eine Problemumgehung, bei der das ausgeblendete DIV vorübergehend sichtbar gemacht wird:

Lösung: Übergeordnetes Element sichtbar machen

Um die Höhe eines ausgeblendeten DIV zu messen, Die folgenden Schritte können ausgeführt werden:

  1. Alle übergeordneten Elemente des DIV abrufen, bis ein sichtbares übergeordnetes Element gefunden wird.
  2. Setzen Sie das Anzeigeattribut aller ausgeblendeten übergeordneten Elemente auf „Blockieren“, um sie zu erstellen sichtbar.
  3. Messen Sie die offsetHeight des DIV.
  4. Setzen Sie die Anzeigeattribute der übergeordneten Elemente auf „Keine“ zurück, um sie wieder auszublenden.

Leistung Überlegungen

Dieser Ansatz kann zu Leistungseinbußen führen, wenn viele versteckte übergeordnete Elemente vorhanden sind. Um dies zu mildern, sollten effizientere Techniken wie das Festlegen der Sichtbarkeit auf „Ausgeblendet“ statt auf „Keine“ in Betracht gezogen werden.

Alternative Lösungen

Während das Sichtbarmachen übergeordneter Elemente ein gängiger Ansatz ist, Andere Lösungen umfassen:

  • Kopieren der Knoten des versteckten DIV in ein sichtbares Element, Messen der Höhe und Entfernen der kopierten Knoten.
  • Verwendung von JavaScript-Bibliotheken, die Funktionen zum Messen bereitstellen Höhe der Elemente, auch wenn sie ausgeblendet sind.

Das obige ist der detaillierte Inhalt vonWie misst man die Höhe eines versteckten DIV-Elements?. 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