Wie erhalte ich die Höhe versteckter Elemente in jQuery?

Bestimmen der Höhe versteckter Elemente in jQuery

Beim Umgang mit versteckten Elementen kann es schwierig sein, deren Abmessungen zu bestimmen. Dieses Problem tritt auf, wenn die Höhe eines Elements ermittelt werden muss, das sich innerhalb eines ausgeblendeten übergeordneten Elements befindet. Ein gängiger Ansatz besteht darin, das übergeordnete Element vorübergehend anzuzeigen, die Höhe zu extrahieren und es dann wieder auszublenden.

Diese Methode kann jedoch ineffizient erscheinen. Gibt es eine optimalere Lösung?

Für jQuery-Benutzer kann ein ausgefeilterer Ansatz verwendet werden, um Elementhöhen auch dann abzurufen, wenn sie ausgeblendet sind. Durch die Nutzung der „absoluten“ Positionierung und „Sichtbarkeits“-Manipulation von jQuery können wir verborgene Elemente vorübergehend zu Messzwecken sichtbar machen:

<code class="javascript">var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display: 'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");</code>

Bei dieser Technik wird das Element mit dem verborgenen übergeordneten Element so eingestellt, dass es eine absolute Position hat Entfernt es aus dem normalen Dokumentenfluss und eine versteckte Sichtbarkeit, wodurch es für den Benutzer unsichtbar wird. Anschließend wird die Eigenschaft „display“ auf „block“ gesetzt, wodurch das Element Platz einnehmen kann, um die Höhenmessung zu ermöglichen.

Nach dem Abrufen der Höhe wird der ursprüngliche CSS-Stil wiederhergestellt, um den vorherigen Zustand des Elements beizubehalten . Dieser Ansatz bietet eine präzisere und effizientere Möglichkeit, die Höhe versteckter Elemente in jQuery zu bestimmen und vorübergehende Anzeigeänderungen und unnötiges Flackern zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Höhe versteckter Elemente in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!