Holen Sie sich die Höhe des DIV -Elements in JavaScript

Die Höhe des DIV -Elements in JavaScript zu erhalten ist sehr hilfreich bei der Anwendung eines ordnungsgemäßen Layout. Zum Beispiel erfordern das Erstellen einer bestimmten Webseite oder Website die hinzugefügten Funktionen und Funktionen, die eine ordnungsgemäße Formatierung erfordern, ohne das Dokumentendesign zu ändern.

Diese Beschreibung zeigt die Ansätze, um die Höhe des DIV-Elements in JavaScript zu erhalten.

So erhalten Sie die Höhe des Div -Elements in JavaScript?

Die folgenden Ansätze können verwendet werden, um die Höhe des DIV -Elements in JavaScript zu erhalten:

• “Offseteigheight" Eigentum.
• “ClientHeight" Eigentum.
• “Scrollheight" Eigentum.
• “JQuery" Ansatz.

Ansatz 1: Holen Sie sich die Höhe des DIV -Elements in JavaScript mithilfe der Offseteight -Eigenschaft

Der "OffseteigheightEigenschaft gibt die äußere Höhe eines Elements mit der Polsterung sowie der Grenzen zurück. Diese Eigenschaft kann implementiert werden, um die Höhe der Zugriffsüberschrift auf dem Schaltflächenklick zu berechnen.

Syntax

Element.Offseteigheight

Hier, "Element”Entspricht dem Element, das für die Höhe berechnet werden soll.

Beispiel

Im folgenden Beispiel:

• Geben Sie die folgende DIV mit einer zugewiesenen Klasse an.
• Geben Sie auch die angegebene Überschrift innerhalb, die für die berechnet werden soll, einHöhe”.
• Erstellen Sie nun eine Schaltfläche mit einem “ONCLICKEreignis, das die Funktion divheight () aufrufen.
• Zu den Überschriften zuweisen, um die berechnete Höhe anzuzeigen:

Dies ist LinuxHint -Website

Holen Sie sich die Höhe des DIV -Elements

Die Höhe des Div -Elements ist:

Im weiteren JS -Code:

• Deklarieren Sie im folgenden JS -Code eine Funktion namens “Divheight ()”.
• Greifen Sie in seiner Definition mit der von der Klasse auf die zugewiesene DIV zudokumentieren.QuerySelector ()Methode und die Überschrift für die berechnete Höhe mit der “dokumentieren.GetElementById ()" Methode.
• Danach anwenden Sie die “OffseteigheightEigenschaft zur Berechnung der äußeren Höhe der angegebenen Überschrift und Anzeige in der zugewiesenen ÜberschriftInnerText" Eigentum:

Funktion divheight ()
lass GetDiv = Dokument.QuerySelector ('.Element');
Lassen Sie Get = Dokument.GetelementById ("Kopf")
Sei Höhe = getDiv.Offseteigheight;
erhalten.InnerText = +Höhe

Ausgang

In der obigen Ausgabe ist es offensichtlich, dass die Höhe berechnet wird.

Ansatz 2: Holen Sie sich die Höhe des Div -Elements im JavaScript mit der ClientHeight -Eigenschaft

Der "ClientHeightDie Eigenschaft dagegen berechnet die innere Höhe des Elements einschließlich der Polsterung, jedoch ohne die Grenzen. Diese Eigenschaft kann in ähnlicher Weise auf das enthaltene Bild innerhalb des DIV -Elements angewendet werden.

Syntax

Element.ClientHeight

Auch hier, "Element”Entspricht dem Element, das für die Höhe berechnet werden soll.

Beispiel

• Wiederholen Sie die oben diskutierten Ansätze zur Angabe der “div" Klasse.
• Geben Sie hier das folgende Bild an, das für die berechnet werden sollHöhe”.
• Ebenso eine Überschrift für die berechnete Höhe zuweisen und eine Taste mit einem angehängten Ereignis erstellen “ONCLICK" wie besprochen:

Die Höhe des Div -Elements ist:

Holen Sie sich die Höhe des DIV -Elements

In der unten angegebenen JS -Funktion:

• Definieren Sie eine Funktion namens “Divheight ()”.
• Wiederholen Sie die oben diskutierten Ansätze für den Zugriff auf die “divElement und die mitgelieferte Überschrift.
• Danach anwenden Sie die “ClientHeightEigenschaft zur Berechnung der Außenhöhe des im obigen Code angegebenen Bildes und zurückgibt es als Überschrift:

Funktion divheight ()
Lassen Sie Box = Dokument.QuerySelector ('.Element');
Lassen Sie Get = Dokument.GetElementById ('Kopf')
Sei Höhe = Box.ClientHeight;
erhalten.InnerText = +Höhe

Ausgang

Aus dem obigen Ausgang kann beobachtet werden, dass die erforderliche Funktionalität erreicht wird.

Ansatz 3: Holen Sie sich die Höhe des DIV -Elements im JavaScript mithilfe der Scrollheight -Eigenschaft

Der "Scrollheight"Eigenschaft ist identisch mit dem"ClientHeightEigentum, während es die Höhe eines Elements mit der Polsterung zurückgibt, aber nicht die Grenzen. Diese Eigenschaft kann auf die erstellte Tabelle angewendet werden, um ihre Höhe zu berechnen.

Syntax

Element.Scrollheight

In der gegebenen Syntax “,“ElementIn ähnlicher Weise entspricht das Element, das für die Höhe berechnet werden soll.

Beispiel

• Zunächst einschließen die “div"Element mit dem angegebenen"Klasse"Und ein angeschlossen"Onmouseover”Ereignis umleiten zur Funktion Divheight ().
• Erstellen Sie als nächstes eine Tabelle mit den angegebenen Überschriften- und Datenwerten.
• In ähnlicher Weise können Sie die diskutierte Methode zur Zuweisung einer Überschrift zur Anzeige der darin enthaltenen Berechnung durchführen:

AUSWEIS.	Name	Alter
1	Harry	18
2	David	46

Befolgen Sie im folgenden JS -Code den angegebenen Schritten:

• Definieren Sie die mit dem Namen benannte Funktion “Divheight ()”.
• Greife auf ... zu "div" Element.
• Schließlich wenden Sie das an “ScrollheightEigenschaft, um die Höhe der erstellten Tabelle zurückzugeben:

Funktion divheight ()
lass GetDiv = Dokument.QuerySelector ('.Element');
Sei Höhe = getDiv.Scrollheight;
Konsole.log ("Die Höhe des DIV -Elements lautet:", +Höhe)

Ausgang

Ansatz 4: Holen Sie sich die Höhe des DIV -Elements im JavaScript mit dem JQuery -Ansatz

Dieser Ansatz gibt die Höhe der Überschrift sowie den Absatz innerhalb des DIV -Elements mit Hilfe einer JQuery -Bibliothek zurück.

Beispiel

• Geben Sie in der folgenden Demonstration die angegebene JQuery -Bibliothek ein, um ihre Methoden anzuwenden.
• Geben Sie als nächstes die “an"divUnd enthalten die folgende Überschrift und Absatz darin, die für die Höhe berechnet werden sollen.
• Danach können Sie die diskutierten Methoden zum Erstellen einer Taste und zum Zuweisen einer Überschrift für die resultierende Höhe zuweisen, die darin angezeigt werden soll:

JavaScript

JavaScript ist eine sehr effektive Programmiersprache, die auch in HTML integriert werden kann, um verschiedene zusätzliche Funktionen bei der Gestaltung einer bestimmten Webseite oder der Website auszuführen. Dies führt dazu, dass die Benutzer anziehen und das gesamte Dokumentendesign verbessern.


Holen Sie sich die Höhe des DIV -Elements

Im untergegebenen Code:

• Wenden Sie im Jquery -Code das anbereit()Methode, um den weiteren Code auszuführen, sobald das Dokumentobjektmodell (DOM) geladen ist.
• Wenden Sie nun das an “anklicken()Methode, mit der die angegebene Funktion auf der Schaltfläche Klick ausgeführt wird
• Zuletzt auf die Schaltfläche Klicken Sie auf die “zu"divElement und wenden Sie das anHöhe()Methode, damit die Höhe zurückgibt:

$ (Dokument)
.Ready (function ()
$ ("Button").klicken (function ()
var divheight = $ ("#Element").Höhe();
$ ("#Ergebnis").HTML ("Die Höhe des Div -Elements ist:" + divheight);
);
);

Ausgang

Diese Beschreibung hat die Ansätze zusammengestellt, um die Höhe des DIV-Elements in JavaScript zu erhalten.

Abschluss

Der "offsetheighT ”Eigentum, das“ClientHeight”Eigentum, die“Scrollheight”Eigentum oder die“JQueryDer Ansatz kann verwendet werden, um die Höhe des Div -Elements in JavaScript zu erhalten. Die Offseteight -Eigenschaft kann angewendet werden. Die ClientHeight -Eigenschaft und die ScrollHeight -Eigenschaft können für die Berechnung der inneren Höhe des Elements entschieden werden. Der JQuery -Ansatz kann auch durch Einbeziehung seiner Bibliothek und die Verwendung seiner Methoden zur Durchführung der erforderlichen Berechnungen implementiert werden. Dieser Artikel hat die Ansätze gezeigt, die angewendet werden können, um die Höhe des DIV -Elements in JavaScript zu erhalten.