Wie rufe ich die tatsächliche Breite und Höhe eines HTML -Elements ab?

Während der Entwicklung von Websites mit JavaScript müssen Entwickler in vielen Fällen eine tatsächliche Breite und Höhe eines HTML -Elements abrufen. Zum Beispiel dynamische Größen- oder Positionierungselemente auf einer Webseite, Layoutanpassungen usw.

In diesem Artikel werden die Möglichkeiten erläutert, eine tatsächliche Breite und Höhe eines HTML -Elements abzurufen.

So holen/erhalten Sie die tatsächliche Höhe und Breite von HTML -Elementen?

Verwenden Sie die folgenden Ansätze zum Abrufen der Breite und Höhe eines HTML -Elements:

• Benutzen "Clientbreite" Und "ClientHeight" Eigenschaften
• Benutzen "Offsetwidth" Und "Offseteigheight" Eigenschaften

Methode 1: Abrufen Sie die tatsächliche Breite und Höhe eines HTML -Elements mithilfe der Eigenschaften „Clientwidth“ und „ClientHeight“ ab

Verwenden Sie die “Clientbreite" Und "ClientHeightEigenschaften zum Abrufen der tatsächlichen Höhe und Breite eines HTML -Elements. "Clientwidth" und "ClientHeight" repräsentiert die Abmessungen des Inhaltsbereichs des Elements, wie die innere Breite und Höhe eines Elements während des Polsters, der Grenze und des Randes, ausgeschlossen.

Syntax

Verwenden Sie die folgende Syntax, um die Breite und Höhe eines Elements unter Verwendung der Eigenschaften „Clientwidth“ und „ClientHeight“ zu erhalten:

Element.Clientbreite
Element.ClientHeight

Beispiel

Verwenden Sie in einer HTML -Datei die HTML -Elemente “div","Spanne", Und "H4Um einen Text auf der Seite anzeigen:

> Zum Lernen JavaScript folgen Sie LinuxHint folgen

Rufen Sie die tatsächliche Breite und Höhe des HTML -Elements ab

Überprüfen Sie nun die Breite und Höhe eines “div" Element. Holen Sie sich zunächst die Referenz des DIV -Elements mit dem “GetElementById ()Methode durch Übergabe der zugewiesenen ID als Argument:

Sei div = document.GetElementById ('Div');

Rufen Sie die Eigenschaften „Clientbreite“ und „ClientHeight“ mit einem Divelelement an und speichern Sie deren resultierenden Werte in VariablenDivwidth" Und "Divheight”:

lass divwidth = div.Kundenbreite;
lass divheight = div.ClientHeight;

Drucken Sie die Breite und Höhe des DIV auf der Konsole mit dem “Konsole.Protokoll()" Methode:

Konsole.log (divwidth, divheight);

Der Ausgang zeigt die Breite von Div “842"Und die Höhe, die es enthält" ist "59”:

Methode 2: Rufen Sie die tatsächliche Breite und Höhe eines HTML -Elements mithilfe der Eigenschaften „Offsetwidth“ und „Offseteight“ ab

Verwenden Sie die “, um die tatsächliche Breite und Höhe eines Elements zu erhalten/abzurufenOffsetwidth" Und "Offseteigheight" Eigenschaften. "Offsetwidthus" und "Offseteight" sind Eigenschaften, die Informationen über die Dimensionen eines Elements während des Polsters, der Grenze und des Randes enthalten.

Syntax

Folgen Sie der angegebenen Syntax für die Eigenschaften „Offsetwidth“ und „Offseteight“:

Element.Offsetwidth
Element.Offseteigheight

Beispiel

Hier sehen wir die Breite und Höhe des H4 -Elements mit "Offsetwidth" und "Offseteight" -Formen:

Lassen Sie die Kopfbreite = Überschrift.Offsetwidth;
lass Headingheight = Heading.Offseteigheight;

Ausgang

Das ging nur darum, die tatsächliche Breite und Höhe des HTML -Elements abzurufen.

Abschluss

Verwenden Sie das “, um eine tatsächliche Breite und Höhe eines HTML -Elements abzurufenClientbreite" Und "ClientHeight" oder der "Offsetwidth" Und "Offseteigheight" Eigenschaften. "Clientbreite" und "ClientHeight" werden verwendet, um die Breite und Höhe eines Elements während des Polsters, der Rande und des Randes auszuschließen. Die „Offsetwidth“ und „Offseteight“ berechnen die Breite und Höhe eines Elements, einschließlich Rand, Polsterung und Marge. In diesem Artikel wurde die Möglichkeiten zum Abrufen einer tatsächlichen Breite und Höhe eines HTML -Elements erläutert.