Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit jQuery effizient die Höhe eines Elements in einem versteckten Div ermitteln?

Wie kann ich mit jQuery effizient die Höhe eines Elements in einem versteckten Div ermitteln?

Mary-Kate Olsen
Freigeben: 2024-12-15 16:31:17
Original
165 Leute haben es durchsucht

How Can I Efficiently Get the Height of an Element Inside a Hidden Div Using jQuery?

Höhe versteckter Elemente in jQuery abrufen

Das Ermitteln der Höhe eines Elements, das in einem versteckten Div verborgen ist, kann eine Herausforderung sein. Die herkömmliche Methode besteht darin, das Div anzuzeigen, die Höhe abzurufen und es dann auszublenden, was umständlich sein kann.

Es gibt jedoch einen effizienteren Ansatz, der die Fähigkeit von jQuery nutzt, CSS-Stile zu ändern:

Ansatz

  1. CSS ändern:Vorübergehend eingestellt die folgenden CSS-Eigenschaften für das versteckte Div:

    • Position: absolut (optional, wenn das Div bereits absolut ist)
    • Sichtbarkeit: versteckt
    • Anzeige: Block
  2. Höhe abrufen: Rufen Sie mit der height()-Funktion von jQuery die Höhe ab Element innerhalb des jetzt sichtbaren Div.
  3. CSS wiederherstellen: Sobald die Höhe erreicht ist, stellen Sie die ursprünglichen CSS-Eigenschaften des Div wieder her.

Codebeispiel

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 : "");
Nach dem Login kopieren

Dieser Ansatz bietet eine effizientere und flexiblere Möglichkeit, die Höhe ausgeblendeter Elemente zu ermitteln, ohne das übergeordnete Element wiederholt ein- und ausblenden zu müssen div.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery effizient die Höhe eines Elements in einem versteckten Div ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage