Warum geben jQuerys „height()' und „width()' Werte ungleich Null für Elemente mit „display:none' zurück?

Das unkonventionelle Height()- und Width()-Verhalten von jQuery mit „display:none“

Die height()- und width()-Methoden von jQuery sind Wird häufig verwendet, um die sichtbaren Abmessungen von Elementen auf einer Webseite zu bestimmen. Es scheint jedoch ein unerwartetes Verhalten beim Umgang mit Elementen zu geben, bei denen die CSS-Eigenschaft „display:none“ festgelegt ist.

Die Frage

Traditionell wurde daran geglaubt dass Elemente mit „display:none“ eine Höhe und Breite von Null haben. Dies ist jedoch bei jQuery nicht immer der Fall. Betrachten Sie das folgende Beispiel:

<code class="html"><div id="target" style="display:none;">
  a
</div></code>

<code class="css">alert($("#target").height());</code>

In diesem Beispiel ist die Höhe des „Ziel“-Elements nicht Null, sondern ein Wert ungleich Null. Diese Inkonsistenz wirft die Frage auf: Warum geben Elemente mit „display:none“ in jQuery manchmal Höhen und Breiten ungleich Null zurück?

Die Antwort

Um dieses Verhalten zu verstehen , müssen wir uns mit dem Innenleben der height()- und width()-Methoden von jQuery befassen. Wenn ein Element eine sichtbare offsetWidth von 0 hat (was anzeigt, dass es „versteckt“ ist), versucht jQuery, seine tatsächlichen Abmessungen zu berechnen. Dies geschieht durch vorübergehendes Überschreiben der CSS-Eigenschaften des Elements:

• Position: „absolute“
• Sichtbarkeit: „versteckt“
• Anzeige: „block“

Mit diesen Änderungen ruft jQuery die Höhe des Elements ab und berücksichtigt dabei ggf. Rand und Auffüllung. Sobald die Höhe bestimmt ist, stellt jQuery die ursprünglichen CSS-Eigenschaften wieder her und stellt sicher, dass keine sichtbaren Änderungen auftreten.

Dieser Prozess ermöglicht, dass height() und width() für versteckte Elemente korrekt funktionieren, solange ihre übergeordneten Elemente sichtbar sind. Im Wesentlichen simuliert jQuery das Verhalten, das Element außerhalb des Dokumentflusses anzuzeigen, seine Abmessungen abzurufen und es dann wieder auszublenden – alles hinter den Kulissen in einem einzigen Vorgang. Dadurch entfällt für Entwickler die Notwendigkeit, Elemente manuell ein- und auszublenden, um ihre Abmessungen zu erhalten.

Das obige ist der detaillierte Inhalt vonWarum geben jQuerys „height()' und „width()' Werte ungleich Null für Elemente mit „display:none' zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!