Heim > Web-Frontend > CSS-Tutorial > Warum gibt „jQuery.height()' einen Wert für ein ausgeblendetes Element zurück?

Warum gibt „jQuery.height()' einen Wert für ein ausgeblendetes Element zurück?

Susan Sarandon
Freigeben: 2024-10-28 05:23:02
Original
825 Leute haben es durchsucht

Why Does `jQuery.height()` Return a Value for a Hidden Element?

jQuery: height()/width() und „display:none“

In diesem Szenario wird das Element mit der ID „target Die Anzeigeeigenschaft von „ ist über CSS auf „none“ gesetzt. Bei der Überprüfung der Höhe mit $("#target").height() wird jedoch ein Wert ungleich Null erhalten.

Dieses Verhalten ergibt sich aus der internen Verarbeitung versteckter Elemente durch jQuery beim Zugriff auf deren Abmessungen. Wenn ein Element eine offsetWidth von 0 hat (von jQuery als „versteckt“ betrachtet), versucht die Bibliothek, seine Höhe zu bestimmen.

Um dies zu erreichen, wendet jQuery vorübergehend die folgenden Eigenschaften auf das Element an:

  • Position: „absolut“
  • Sichtbarkeit: „versteckt“
  • Anzeige: „Block“

Dann wird die Höhe mit getWidthOrHeight(... abgerufen) ), das nach Bedarf Rahmen/Abstände hinzufügt und die ursprünglichen Eigenschaften wiederherstellt.

Im Wesentlichen zeigt jQuery das Element diskret an, erhält seine Höhe und verbirgt es dann wieder. Dies geschieht, bevor der UI-Thread aktualisiert werden kann, sodass der Benutzer nichts von dem Prozess mitbekommt.

Dieser Mechanismus ermöglicht es, dass .height()/.width() auch bei ausgeblendeten Elementen funktioniert, sofern ihre übergeordneten Elemente sichtbar sind. Daher können Sie .height()/.width() aufrufen, ohne die Show-/Hide-Sequenz manuell durchzuführen, da sie intern von diesen Methoden verarbeitet wird.

Das obige ist der detaillierte Inhalt vonWarum gibt „jQuery.height()' einen Wert für ein ausgeblendetes Element zurück?. 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