¿Cómo recupero el ancho y la altura reales de un elemento HTML??

Mientras desarrollan sitios web que usan JavaScript, en muchos casos, los desarrolladores deben recuperar un ancho y altura reales de un elemento HTML. Por ejemplo, elementos de dimensionamiento o posicionamiento dinámico en una página web, ajustes de diseño, etc.

Este artículo explicará las formas de recuperar un ancho y altura reales de un elemento HTML.

Cómo recuperar/obtener la altura y el ancho reales de los elementos HTML?

Para recuperar el ancho y la altura de un elemento HTML, use los siguientes enfoques:

• Usando "ancho del cliente" y "clientHeight" Propiedades
• Usando "ancho de compensación" y "apresurado" Propiedades

Método 1: recupere el ancho y la altura reales del elemento HTML utilizando las propiedades "ClientWidth" y "ClientHeight"

Utilizar el "ancho del cliente" y "clientHeight"Propiedades para recuperar la altura y el ancho reales de un elemento HTML. "ClientWidth" y "ClientHeight" representan las dimensiones del área de contenido del elemento, como el ancho interno y la altura de un elemento mientras se excluyen el relleno, el borde y el margen.

Sintaxis

Use la siguiente sintaxis para obtener el ancho y la altura de un elemento utilizando las propiedades "ClientWidth" y "ClientHeight":

elemento.ancho del cliente
elemento.clientHeight

Ejemplo

En un archivo HTML, use los elementos HTML "div","durar", y "H4"Para mostrar algún texto en la página:

> Para aprender JavaScript, siga a Linuxhint

Recuperar el ancho y la altura reales del elemento HTML

Ahora, verifique el ancho y la altura de un "div" elemento. Entonces, primero, obtenga la referencia del elemento DIV usando el "getElementById ()Método "Al pasar la identificación asignada como argumento:

Dejar div = documento.getElementByid ('div');

Llame a las propiedades "ClientWidth" y "ClientHeight" con un elemento DIV y almacene sus valores resultantes en variables "divwidth" y "divisas":

Dejar divwidth = div.ClientWidth;
Deja que Divheight = div.ClientHeight;

Imprima el ancho y la altura del div en la consola usando el "consola.registro()" método:

consola.log (divwidth, divheight);

La salida muestra el ancho de div "842"Y la altura que contiene es"59":

Método 2: recuperar el ancho y la altura reales de un elemento HTML utilizando las propiedades "OffsetWidth" y "Offsetheight"

Para obtener/recuperar el ancho y la altura reales de un elemento, utilice el "ancho de compensación" y "apresurado" propiedades. "OffsetWidth" y "Offsetheight" son propiedades que proporcionan información sobre las dimensiones de un elemento mientras se incluyen relleno, borde y margen.

Sintaxis

Siga la sintaxis dada para las propiedades "offsetWidth" y "offsetheight":

elemento.ancho de compensación
elemento.apresurado

Ejemplo

Aquí, veremos el ancho y la altura del elemento H4 usando las propiedades "OffsetWidth" y "Offsetheight":

Deja que Headingwidth = encabezado.OffsetWidth;
Deja que HeadingHeight = encabezado.descuidado;

Producción

Eso se trataba de recuperar el ancho y la altura reales del elemento HTML.

Conclusión

Para recuperar un ancho y altura reales de un elemento HTML, use el "ancho del cliente" y "clientHeight" o el "ancho de compensación" y "apresurado" propiedades. "ClientWidth" y "ClientHeight" se usan para calcular el ancho y la altura de un elemento mientras se excluyen el relleno, el borde y el margen. El "OffsetWidth" y "Offsetheight" calculan el ancho y la altura de un elemento, que incluye borde, relleno y margen. Este artículo explicó las formas de recuperar un ancho y altura reales de un elemento HTML.