Wie erhalte ich die Höhe eines Div ohne jQuery?

Div-Höhe ohne die Notwendigkeit von jQuery ermitteln

Entwickler suchen häufig nach Methoden, um die Höhe eines div-Elements abzurufen, ohne auf Bibliotheken wie jQuery angewiesen zu sein . Während die .height()-Methode von jQuery häufig zitiert wird, gibt es einfache JavaScript-Lösungen, die dieselbe Aufgabe effektiv erledigen können.

Alternativen zu .height() von jQuery

Zu Um die Höhe eines Div ausschließlich über JavaScript zu bestimmen, können Entwickler die Eigenschaften clientHeight oder offsetHeight des HTMLElement-Objekts verwenden, das das Div darstellt. So funktioniert jede Eigenschaft:

• clientHeight: Diese Eigenschaft misst die Höhe des sichtbaren Inhalts des Div, einschließlich Innenabstand, aber ohne Ränder und Bildlaufleisten.
• offsetHeight: Diese Eigenschaft gibt die Gesamthöhe zurück des Div, einschließlich Auffüllung, Bildlaufleisten und Ränder.

Implementierung

Um die Höhe eines Div mithilfe von clientHeight abzurufen, verwenden Sie die folgende Syntax:

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

Um Bildlaufleisten und Rahmen in die Messung einzubeziehen, können Sie alternativ offsetHeight verwenden:

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

Beispiel

Hier ist ein Beispiel dafür demonstrieren Sie die Verwendung beider Eigenschaften:

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight; // Returns 80
var offsetHeight = document.getElementById('myDiv').offsetHeight; // Returns 130</code>

In diesem Beispiel gibt clientHeight 80 Pixel zurück, da es die Auffüllung und den Rand ausschließt, während offsetHeight 130 Pixel zurückgibt, einschließlich aller Elemente, die zur Höhe des Div beitragen.

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