Jak odzyskać rzeczywistą szerokość i wysokość elementu HTML?

Podczas opracowywania stron internetowych za pomocą JavaScript, w wielu przypadkach programiści muszą odzyskać rzeczywistą szerokość i wysokość elementu HTML. Na przykład elementy dynamiczne lub pozycjonowanie na stronie internetowej, regulacje układu itp.

W tym artykule wyjaśniono sposoby odzyskania rzeczywistej szerokości i wysokości elementu HTML.

Jak pobrać/uzyskać rzeczywistą wysokość i szerokość elementów HTML?

Aby odzyskać szerokość i wysokość elementu HTML, zastosuj następujące podejścia:

• Za pomocą "szerokość klienta" I "ClientHeight" Nieruchomości
• Za pomocą "OffsetWidth" I "OffSetheight" Nieruchomości

Metoda 1: Odzyskaj rzeczywistą szerokość i wysokość elementu HTML za pomocą właściwości „ClientWidth” i „ClientHeight”

Użyj "szerokość klienta" I "ClientHeight”Właściwości odzyskiwania rzeczywistej wysokości i szerokości elementu HTML. „KlientWidth” i „ClientHeight” reprezentują wymiary obszaru zawartości elementu, takie jak wewnętrzna szerokość i wysokość elementu, podczas gdy wyściółka, granica i margines są wykluczone.

Składnia

Użyj następującej składni, aby uzyskać szerokość i wysokość elementu za pomocą właściwości „ClientWidth” i „ClientHeight”:

element.szerokość klienta
element.ClientHeight

Przykład

W pliku HTML użyj elementów HTML ”div”,„Zakres", I "H4„Aby pokazać tekst na stronie:

> Do nauki JavaScript śledź Linuxhint

Odzyskać rzeczywistą szerokość i wysokość elementu HTML

Teraz sprawdź szerokość i wysokość „div" element. Po pierwsze, uzyskaj odniesienie do elementu DIV za pomocą „getElementById ()„Metoda, przekazując przypisany identyfikator jako argument:

Niech Div = dokument.getElementById („div”);

Zadzwoń do właściwości „ClientWidth” i „ClientHeight” z elementem DIV i przechowuj ich wynikowe wartości w zmiennych ”DivWidth" I "Divheight”:

niech divWidth = div.ClientWidth;
Niech divheight = div.ClientHeight;

Wydrukuj szerokość i wysokość div na konsoli za pomocą „konsola.dziennik()" metoda:

konsola.log (divWidth, divheight);

Wyjście pokazuje szerokość DIV "842”I wysokość, którą zawiera, to„59”:

Metoda 2: Odzyskaj rzeczywistą szerokość i wysokość elementu HTML za pomocą właściwości „OffsetWidth” i „OffSetheight”

Aby uzyskać/odzyskać rzeczywistą szerokość i wysokość elementu, użyj „OffsetWidth" I "OffSetheight" nieruchomości. „OffsetWidth” i „OffSetheight” to właściwości, które dostarczają informacji o wymiarach elementu, podczas gdy uwzględniono wyściółkę, granicę i margines.

Składnia

Postępuj zgodnie z podaną składnią dla właściwości „OffsetWidth” i „OffSetheight”:

element.OffsetWidth
element.OffSetheight

Przykład

Tutaj zobaczymy szerokość i wysokość elementu H4 za pomocą właściwości „OffsetWidth” i „OffSetheight”:

Niech nagłówek = nagłówek.OffsetWidth;
Niech HeadingHeight = nagłówek.OffSetheight;

Wyjście

Chodziło o odzyskanie rzeczywistej szerokości i wysokości elementu HTML.

Wniosek

Aby odzyskać rzeczywistą szerokość i wysokość elementu HTML, użyj „szerokość klienta" I "ClientHeight" albo "OffsetWidth" I "OffSetheight" nieruchomości. „KlientWidth” i „ClientHeight” są używane do obliczania szerokości i wysokości elementu, podczas gdy wykluczone są wyściółka, granica i margines. „OffsetWidth” i „OffSetheight” obliczają szerokość i wysokość elementu, w tym obramowanie, wyściółki i margines. W tym artykule wyjaśniono sposoby odzyskania rzeczywistej szerokości i wysokości elementu HTML.