Heim > Web-Frontend > js-Tutorial > Wie erhalte ich die gerenderte Höhe eines HTML-Elements mit jQuery?

Wie erhalte ich die gerenderte Höhe eines HTML-Elements mit jQuery?

Barbara Streisand
Freigeben: 2024-12-04 22:09:17
Original
164 Leute haben es durchsucht

How to Get the Rendered Height of an HTML Element Using jQuery?

Ermitteln Sie die gerenderte Höhe eines HTML-Elements mit jQuery

In HTML ist es oft notwendig, die gerenderte Höhe eines Elements automatisch zu bestimmen wird erweitert, um seinen Inhalt aufzunehmen. Dies kann erreicht werden, ohne das Höhenattribut explizit festzulegen.

jQuery-Lösung

jQuery bietet mehrere Methoden, um die gerenderte Höhe eines Elements wie folgt zu ermitteln:

  • .clientHeight: Beinhaltet die Höhe und Vertikale padding.
  • .offsetHeight: Beinhaltet die Höhe, den vertikalen Abstand und die oberen/unteren Ränder.
  • .scrollHeight: Beinhaltet die Höhe des enthaltenes Dokument (beim Scrollen), vertikale Auffüllung und vertikal Grenzen.

Verwendung:

Um die gerenderte Höhe eines Elements mit der ID „someDiv“ zu erhalten, verwenden Sie einen der folgenden jQuery-Ausdrücke:

var h = $("#someDiv").clientHeight();
var h = $("#someDiv").offsetHeight();
var h = $("#someDiv").scrollHeight();
Nach dem Login kopieren

Beispiel:

Betrachten Sie a <div> Element mit Inhalt, der seine Höhe erhöht:

<div>
Nach dem Login kopieren

Mit jQuery können wir die gerenderte Höhe dieses Elements wie folgt ermitteln:

var renderedHeight = $("#someDiv").offsetHeight();

console.log("Rendered height:", renderedHeight);
Nach dem Login kopieren

Hinweis:

  • Die gerenderte Höhe kann je nach verwendeter Methode variieren.
  • Wenn das Element ausgeblendet ist Wenn Sie einen Inhalt oder einen Bildlauf durchführen, gibt die .scrollHeight-Methode die richtige Höhe zurück.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die gerenderte Höhe eines HTML-Elements mit jQuery?. 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