Abrufen der Höhe verdeckter Elemente mit jQuery

Bei der Arbeit mit versteckten Elementen kann es für verschiedene Zwecke erforderlich sein, deren Abmessungen abzurufen. Herkömmliche Methoden zum Ermitteln der Höhe eines Elements können jedoch fehlschlagen, wenn das Element nicht sichtbar ist.

Ineffizienter Ansatz

Der beschriebene Ansatz, das Element vorübergehend einzublenden und zu messen seine Höhe, und es dann wieder zu verstecken ist umständlich und ineffizient.

Alternative Lösung

jQuery bietet eine effizientere Lösung:

1. Elementattribute ändern: Stilattribute des Elements vorübergehend bearbeiten:

   • Setzen Sie die Position auf absolut (optional, wenn das Element bereits absolut positioniert ist)
   • Setzen Sie die Sichtbarkeit auf ausgeblendet (das Element unsichtbar machen)
   • Anzeige auf Block setzen (das Element sichtbar machen, aber nicht im Hauptdokumentfluss)
2. Höhe messen: Rufen Sie die Höhe des Elements mit der .height()-Methode von jQuery ab.
3. Attribute wiederherstellen: Setzen Sie die zurück Setzen Sie die Stilattribute des Elements mithilfe der attr()-Methode oder durch direktes Festlegen der Stileigenschaft auf ihre ursprünglichen Werte zurück.

Codebeispiel

var previousCss = $("#myDiv").attr("style");

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

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

$("#myDiv").attr("style", previousCss ? previousCss : "");

Mit dieser Methode können Sie die Höhe eines ausgeblendeten Elements diskret messen, ohne das Layout oder die Sichtbarkeit der Seite zu beeinträchtigen .