Como faço para recuperar a largura e a altura de um elemento HTML?

Ao desenvolver sites usando JavaScript, em muitos casos, os desenvolvedores precisam recuperar uma largura e altura real de um elemento HTML. Por exemplo, elementos dinâmicos de dimensionamento ou posicionamento em uma página da web, ajustes de layout, etc.

Este artigo explicará as maneiras de recuperar uma largura e altura real de um elemento HTML.

Como recuperar/obter a altura e largura reais dos elementos HTML?

Para recuperar a largura e a altura de um elemento HTML, use as seguintes abordagens:

• Usando "ClientWidth" e "ClientHeight”Propriedades
• Usando "OffsetWidth" e "OffsetHeight”Propriedades

Método 1: Recupere a largura e a altura de um elemento HTML usando as propriedades "Largura do cliente" e "CustomerHeight"

Use o "ClientWidth" e "ClientHeight”Propriedades para recuperar a altura e largura reais de um elemento HTML. "ClientWidth" e "ClientHeight" representa as dimensões da área de conteúdo do elemento, como a largura e a altura interna de um elemento durante o preenchimento, borda e margem são excluídas.

Sintaxe

Use a sintaxe a seguir para obter a largura e a altura de um elemento que utiliza as propriedades "Largura do cliente" e "HEUSTIONAIS":

elemento.ClientWidth
elemento.ClientHeight

Exemplo

Em um arquivo html, use os elementos html “div","período", e "H4”Para mostrar algum texto na página:

> Para aprender JavaScript, siga Linuxhint

Recuperar a largura e altura reais do elemento HTML

Agora, verifique a largura e a altura de um “div" elemento. Então, primeiro, obtenha a referência do elemento div usando o “getElementById ()”Método, passando o ID atribuído como um argumento:

Deixe div = documento.getElementById ('div');

Ligue para as propriedades de "largura de cliente" e "alteração do cliente" com um elemento div e armazene seus valores resultantes em variáveis ​​"DivWidth" e "divha peso”:

Deixe divwidth = div.largura de cliente;
Deixe DivHeight = div.ClientHeight;

Imprima a largura e a altura da div no console usando o “console.registro()”Método:

console.log (divwidth, divheight);

A saída mostra a largura da div “842”E a altura que ele contém é“59”:

Método 2: Recupere a largura e a altura de um elemento HTML usando as propriedades "OffsetWidth" e "Offsetheight"

Para obter/recuperar a largura e a altura real de um elemento, utilize o “OffsetWidth" e "OffsetHeight”Propriedades. "OffsetWidth" e "Offsetheight" são propriedades que fornecem informações sobre as dimensões de um elemento durante o preenchimento, borda e margem são incluídas.

Sintaxe

Siga a sintaxe dada para as propriedades “OffsetWidth” e “Offsetheight”:

elemento.OffsetWidth
elemento.OffsetHeight

Exemplo

Aqui, veremos a largura e a altura do elemento H4 usando as propriedades “OffsetWidth” e “Offsetheight”:

Deixe o HeadingWidth = Heading.largura de deslocamento;
Deixe HeadingHeight = título.fora do peso;

Saída

Isso se tratava de recuperar a largura e a altura reais do elemento HTML.

Conclusão

Para recuperar uma largura e altura real de um elemento html, use o “ClientWidth" e "ClientHeight" ou o "OffsetWidth" e "OffsetHeight”Propriedades. "Largura do cliente" e "CLIENTE HEIGH" são usados ​​para calcular a largura e a altura de um elemento durante o preenchimento, borda e margem são excluídos. A "largura de deslocamento" e "Offsetheight" calculam a largura e a altura de um elemento, incluindo borda, preenchimento e margem. Este artigo explicou as maneiras de recuperar uma largura e altura real de um elemento HTML.