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

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

Sie haben vielleicht angenommen, dass Elemente einen CSS-Stil haben von „display:none“ würde in jQuery 0 für height() und width() zurückgeben. Wie das Beispiel zeigt, ist dies jedoch nicht immer der Fall.

Warum passiert das? Um dieses Verhalten zu verstehen, müssen wir uns damit befassen, wie jQuery mit versteckten Elementen umgeht.

Wenn ein Element eine offsetWidth von 0 hat (was jQuery als „versteckt“ interpretiert), versucht es, seine Höhe zu bestimmen. Dies geschieht durch vorübergehende Änderung des Stils des Elements:

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

Sobald die Höhe über getWidthOrHeight(...) ermittelt und ggf. für Ränder und Polsterung angepasst wird, wird der vorherige Stil wiederhergestellt.

Im Wesentlichen übernimmt jQuery das ausgeblendete Element und zeigt es vorübergehend an Außerhalb des Dokumentflusses ruft er seine Höhe ab und blendet ihn dann wieder aus, ohne dass sich dies auf das visuelle Erscheinungsbild der Seite auswirkt. Dadurch können height() und width() auch für versteckte Elemente genaue Messungen liefern, sofern ihre übergeordneten Elemente sichtbar sind.

Dieser Mechanismus ist in die height()- und width()-Methoden von jQuery integriert, sodass Sie ihn nicht mehr benötigen um die Sichtbarkeit des Elements manuell zu manipulieren.

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