Warum geben die Methoden „.height()' und „.width()' von jQuery Werte für Elemente mit „display: none' zurück?

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

Trotz der weit verbreiteten Annahme, dass Elemente mit „display :none“ für die Methoden .height() und .width() von jQuery Null zurückgibt, ist dies nicht immer der Fall. Im bereitgestellten Beispiel gibt das Zielelement eine Höhe ungleich Null zurück, obwohl es ausgeblendet ist.

Warum passiert das?

Laut dem Quellcode von jQuery ist die offsetWidth eines Elements 0 ( Dies zeigt an, dass jQuery es als „versteckt“ betrachtet.) werden eine Reihe von Schritten unternommen, um die Höhe zu bestimmen:

1. Die Position des Elements wird auf „absolut“ gesetzt.
2. Sichtbarkeit wird auf gesetzt „versteckt“.
3. Anzeige ist auf „Blockieren“ eingestellt.

Dadurch wird das Element effektiv aus dem Dokumentfluss verschoben, die Höhe unter Berücksichtigung von Rand/Abstand berechnet und dann setzt die vorherigen Einstellungen zurück.

JQuery macht das Element also im Wesentlichen vorübergehend sichtbar, berechnet die Höhe und macht es wieder unsichtbar, alles bevor die Benutzeroberfläche tatsächlich aktualisiert wird. Dadurch können .height() und .width() sogar auf versteckten Elementen arbeiten, solange ihre übergeordneten Elemente sichtbar sind.

Die Methoden .height() und .width() handhaben diesen Ein-/Ausblendvorgang intern. Daher müssen Entwickler solche Prüfungen nicht manuell in ihren Code implementieren.

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