Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-11-05 13:00:05
Original
251 Leute haben es durchsucht

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>
Nach dem Login kopieren

Alternativ können Sie offsetHeight verwenden:

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

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!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!