Heim >Web-Frontend >js-Tutorial >So erhalten Sie die Höhe eines Divs in reinem JavaScript: clientHeight vs. offsetHeight

So erhalten Sie die Höhe eines Divs in reinem JavaScript: clientHeight vs. offsetHeight

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-05 13:00:05321Durchsuche

How to Get a Div's Height in Pure JavaScript: clientHeight vs. offsetHeight

So ermitteln Sie die Größe eines Divs mit reinem JavaScript

Wenn Sie versuchen, die Größe eines Divs ohne Einbindung von jQuery zu ermitteln, ist dieser kurze Leitfaden hilfreich wird Sie mit den notwendigen JavaScript-Lösungen ausstatten.

Div-Höhe mit JavaScript ermitteln

Die Verwendung der .height()-Methode von jQuery ist ein beliebter Ansatz, aber auch einfaches JavaScript ist ebenso effektiv Methoden. Sie können beispielsweise die Eigenschaften clientHeight oder offsetHeight verwenden:

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

Alternativ können Sie offsetHeight verwenden:

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

Eigenschaftsunterschiede

  • clientHeight umfasst Auffüllungen, schließt jedoch Ränder und Bildlaufleisten aus.
  • offsetHeight umfasst Auffüllungen, Rahmen und Bildlaufleisten.

Zusammenfassend: Wenn Sie die kombinierte Höhe von Inhalt und Auffüllung benötigen, clientHeight ist ideal. Wenn Sie die Gesamthöhe inklusive aller umgebenden Elemente benötigen, verwenden Sie offsetHeight.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die Höhe eines Divs in reinem JavaScript: clientHeight vs. offsetHeight. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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