jQuery: Berechnen Sie die Höhe eines DIV

Bei der Arbeit eines   Webdesigners   kommt es oft vor, dass Sie sich in der Situation befinden, in der Sie die tatsächlichen Abmessungen der Elemente einer Webseite kennen müssen.

Tatsächlich ist es nicht ungewöhnlich, Berechnungen basierend auf der genauen Größe der DOM-Elemente durchführen zu müssen. Der einfachste und genaueste Weg, diese Informationen zu erhalten, ist die Verwendung einer clientseitigen Sprache wie JavaScript.

Die Elemente einer Webseite sind tatsächlich veränderbar – und durch JavaScript können wir ihre tatsächliche Größe erkennen, selbst wenn eine externe Aktion ihre Größe ändert. Heute werden wir zusammen sehen, wie man   mit jQuery die Höhe eines divs erkennt

Wie bereits erwähnt, kann dieser Vorgang auch über natives JavaScript ausgeführt werden, aber in diesem Handbuch verwenden wir jQuery, einen Vorläufer moderner Frameworks wie React oder   VueJs   , eine weltweit immer noch weit verbreitete Bibliothek.

Inhaltsverzeichnis

  • Height, OuterHeight und InnerHeight: die Höhen in jQuery
  • Berechnen der Höhe eines div in JavaScript
  • Schlussfolgerungen

Height, OuterHeight und InnerHeight: die Höhen in jQuery

In jQuery gibt es drei verschiedene Methoden, um die Höhe eines Elements zu erfassen. Höhe, Außenhöhe und Innenhöhe. Aber welches ist richtig?
Die Antwort ist immer die gleiche… es kommt darauf an. Grundsätzlich kommt es darauf an, was Sie brauchen. Im Folgenden werde ich daher die Unterschiede zwischen den drei Methoden erläutern, um in der Wahl autonom zu sein.

Mit der InnerHeight- Methode können   wir die berechnete Höhe des Elements   einschließlich seiner Füllung kennen, aber nicht die Umrandung   . Um die Methode zu verwenden, wählen Sie einfach das Element aus und rufen Sie die Methode auf.

$(‘#div’). innereHöhe();

Mit der OuterHeight- Methode können wir   die Höhe eines Elements   einschließlich seiner Auffüllung und eines beliebigen Rahmens  ermitteln     .

$(‘#div’). äußereHöhe();

Die letzte Methode,   Height   , gibt Ihnen die Höhe des Elements   ohne Ränder, Rahmen und Auffüllung an. . Nehmen wir an, es ist am zuverlässigsten, um genaue Berechnungen basierend auf der Höhe eines Div durchzuführen. Um es zu verwenden, rufen Sie einfach die Methode auf

$(‘#div’). Höhe ();

Berechnen der Höhe eines div in JavaScript

jQuery ist eindeutig eine JavaScript-basierte Bibliothek, daher hindert uns nichts daran, die Höhe eines DIV über Vanilla-Code zu berechnen. Dies ist sehr einfach, wählen Sie einfach die ID oder Klasse des div, je nachdem, über document.getElementById oder document.getElementByClassName und suchen Sie nach der Objekteigenschaft namens clientHeight.

Der resultierende Code sieht diesem sehr ähnlich.

document.getElementById („myDIV“). clientHeight;

Schlussfolgerungen

Wir haben   4 Methoden   kennengelernt, um die Höhe eines DIV und im Allgemeinen eines im DOM vorhandenen HTML-Elements mit JavaScript und/oder jQuery zu berechnen.

Mein Rat ist jedoch, es gut zu nutzen und immer die Unterschiede zu berücksichtigen, die zwischen verschiedenen Browsern und Geräten auftreten können.

Wenn Sie andere Methoden kennen, um die Höhe eines Div mit Javascript oder jQuery zu berechnen, können Sie mir gerne schreiben und ich werde diesen kurzen Artikel gerne aktualisieren.

 

Leave a Comment

Your email address will not be published.