Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie misst man die Höhe eines versteckten Elements in CSS?

Barbara Streisand
Freigeben: 2024-11-02 05:35:29
Original
629 Leute haben es durchsucht

How to Measure the Height of a Hidden Element in CSS?

Höhe eines versteckten Elements messen

Es kann schwierig sein, die Höhe eines Div zu messen, wenn sein übergeordnetes Element auf „Anzeige: keiner." Die Höhe des untergeordneten Elements ist zunächst Null, was eine Messung unmöglich macht.

Um diese Herausforderung zu meistern, sollten Sie erwägen, die übergeordneten Elemente des Elements nacheinander sichtbar zu machen, bis ein sichtbares übergeordnetes Element gefunden wird. Sobald der höchste „display:none“-Vorfahre sichtbar gemacht wird, können die Abmessungen des Elements gemessen werden.

Nachdem Sie die Messung erhalten haben, setzen Sie alle Elemente auf ihre ursprünglichen „display“-Werte zurück.

Berücksichtigen Sie bei diesem Ansatz mögliche Leistungsprobleme, da das Durchqueren und Anzeigen mehrerer Vorfahren ressourcenintensiv sein kann.

Eine alternative Strategie besteht darin, nur das tatsächliche Element für die Messung sichtbar zu machen, ohne seine Vorfahren zu durchlaufen. Dadurch wird vermieden, dass Stile aufgrund einer Änderung der Elementhierarchie falsch angewendet werden. Stellen Sie sicher, dass Stile, die von der ursprünglichen Position des Elements innerhalb des DOM abhängen, von diesem alternativen Ansatz nicht betroffen sind.

Das obige ist der detaillierte Inhalt vonWie misst man die Höhe eines versteckten Elements in CSS?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!