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

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

Mary-Kate Olsen
Freigeben: 2024-12-22 04:24:13
Original
969 Leute haben es durchsucht

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

Höhe versteckter Elemente mit jQuery ermitteln

Das Ermitteln der Höhe eines Elements, das in einem verborgenen übergeordneten Div verborgen ist, kann eine Herausforderung sein. Es ist ineffizient, das Element vorübergehend anzuzeigen, nur um seine Höhe zu ermitteln, und es dann wieder auszublenden. Hier ist eine optimalere Lösung:

Lösung:

Sie können das folgende Code-Snippet verwenden:

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

Erklärung:

  1. Speichern Sie die aktuellen CSS-Stile des div im previousCss Variable.
  2. Passen Sie das CSS des Divs an, indem Sie seine Position auf „absolut“ (optional, wenn es bereits absolut ist), die Sichtbarkeit auf „Ausgeblendet“ und die Anzeige auf „Blockieren“ festlegen.
  3. Ermitteln Sie die Höhe des jetzt sichtbaren Divs und speichern Sie es in der OptionHeight-Variable.
  4. Stellen Sie die vorherigen CSS-Stile des Div wieder her oder entfernen Sie Inline-Stile, wenn previousCss vorhanden ist leer.

Dieser Ansatz vermeidet die Notwendigkeit, das übergeordnete Div ein- und auszublenden, was zu einer effizienteren Möglichkeit führt, die Höhe des ausgeblendeten Elements zu ermitteln.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery effizient die Höhe eines versteckten Elements 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