Warum geben height() und width() von jQuery Werte für ausgeblendete Elemente zurück?

jQuery: Versteckte Elemente und Dimensionseigenschaften

Entgegen der allgemeinen Annahme geben Elemente mit display:none nicht immer 0 für die Höhe von jQuery zurück () und width() Methoden. Diese Abweichung von den Erwartungen sorgte unter Programmierern für anhaltende Verwirrung.

Enthüllung des Geheimnisses

Die Diskrepanz ergibt sich aus der Art und Weise, wie jQuery Elemente mit dem Stil display:none verarbeitet . Wenn die Offset-Breite eines Elements 0 beträgt, was darauf hinweist, dass es effektiv ausgeblendet ist, versucht jQuery, seine Höhe mithilfe interner Berechnungen zu bestimmen:

1. Temporäre Transformation: Sie ändert vorübergehend die Höhe des Elements CSS-Eigenschaften mit jQuery.swap():

   • Setzt die Position auf „absolut“
   • Setzt die Sichtbarkeit auf „versteckt“
   • Setzt die Anzeige auf „blockieren“
2. Höhenmessung: Mit diesen Änderungen wird die Höhe mithilfe von getWidthOrHeight(...) ermittelt.
3. Eigenschaftswiederherstellung: Schließlich werden die CSS-Eigenschaften auf ihre vorherigen Werte zurückgesetzt, wodurch das Element effektiv wieder ausgeblendet wird.

Dieser gesamte Prozess erfolgt nahtlos, bevor der UI-Thread aktualisiert wird, wobei der ausgeblendete Zustand des Elements erhalten bleibt und gleichzeitig seine Abmessungen abgerufen werden. Durch den Zugriff auf display:none-Elemente über height() und width() stellt jQuery sicher, dass Berechnungen mit ihren Abmessungen unabhängig von ihrem Sichtbarkeitsstatus durchgeführt werden können.

Das obige ist der detaillierte Inhalt vonWarum geben height() und width() von jQuery Werte für ausgeblendete Elemente zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!