Obtenga la altura del elemento div en JavaScript

Obtener la altura del elemento Div en JavaScript es muy útil para aplicar un diseño adecuado al modelo de objeto de documento (DOM) que hace que un sitio web se destaque y resulte en atraer la atención del usuario. Por ejemplo, la creación de una página web o sitio web en particular, las características y funcionalidades adicionales requieren que se acumule el formato adecuado sin alterar el diseño del documento.

Esta redacción demostrará los enfoques para obtener la altura del elemento Div en JavaScript.

Cómo obtener la altura del elemento Div en JavaScript?

Los siguientes enfoques se pueden utilizar para obtener la altura del elemento Div en JavaScript:

• "apresurado" Propiedad.
• "clientHeight" Propiedad.
• "desplazamiento" Propiedad.
• "jQuery" Acercarse.

Enfoque 1: Obtenga la altura del elemento Div en JavaScript utilizando la propiedad OffsetHeight

El "apresuradoLa propiedad devuelve la altura externa de un elemento que incluye el relleno y los bordes. Esta propiedad se puede implementar para calcular la altura del encabezado al que se puede hacer clic en el botón.

Sintaxis

elemento.apresurado

Aquí, "elemento"Corresponde al elemento a calcular para la altura.

Ejemplo

En el siguiente ejemplo:

• Especifique el siguiente DIV con una clase asignada.
• Además, incluya el encabezado especificado que se calculará para el "altura".
• Ahora, cree un botón con un "al hacer clic"Evento invocando la función DivHeight ().
• Después de eso, asigne los encabezados para mostrar la altura calculada:

Este es el sitio web de Linuxhint

Obtenga la altura del elemento Div

La altura del elemento div es:

En el código JS más:

• En el siguiente código JS dado, declare una función llamada "divheight ()".
• En su definición, acceda al DIV asignado por su clase utilizando el "documento.QuerySelector ()Método "y el encabezado para la altura calculada utilizando el"documento.getElementById ()" método.
• Después de eso, aplique el "apresurado"Propiedad para calcular la altura externa del encabezado especificado y mostrarlo en el encabezado asignado discutido antes de usar el"intexto" propiedad:

función divheight ()
Dejar getDiv = documento.QuerySelector ('.elemento');
Deje obtener = documento.getElementById ("Cabeza")
Deja altura = getDiv.descuidado;
conseguir.inteRtext = +altura

Producción

En la salida anterior, es evidente que la altura se calcula.

Enfoque 2: Obtenga la altura del elemento Div en JavaScript utilizando la propiedad ClientHeight

El "clientHeight"La propiedad, por otro lado, calcula la altura interna del elemento, incluido el relleno, pero excluyendo los bordes. Esta propiedad se puede aplicar de manera similar a la imagen incluida dentro del elemento Div.

Sintaxis

elemento.clientHeight

Aquí, igualmente "elemento"Corresponde al elemento a calcular para la altura.

Ejemplo

• Repita los enfoques discutidos anteriormente para especificar el "div" clase.
• Aquí, especifique la siguiente imagen que se calculará para el "altura".
• Del mismo modo, asigne un encabezado para la altura calculada y cree un botón con un evento adjunto "al hacer clic" como se discutio:

La altura del elemento div es:

Obtenga la altura del elemento Div

En la siguiente función JS dada:

• Defina una función llamada "divheight ()".
• Repita los enfoques discutidos anteriormente para acceder al "divEl elemento y el encabezado incluido.
• Después de eso, aplique el "clientHeightPropiedad para calcular la altura externa de la imagen especificada en el código anterior y devolverla como un encabezado:

función divheight ()
Dejar box = documento.QuerySelector ('.elemento');
Deje obtener = documento.getElementByID ('cabeza')
Deja altura = caja.ClientHeight;
conseguir.inteRtext = +altura

Producción

De la salida anterior, se puede observar que se logra la funcionalidad requerida.

Enfoque 3: Obtenga la altura del elemento Div en JavaScript utilizando la propiedad Scrollheight

El "desplazamiento"La propiedad es idéntica a la"clientHeight"Propiedad, ya que devuelve la altura de un elemento con el relleno, pero no con los bordes. Esta propiedad se puede aplicar a la tabla creada para calcular su altura.

Sintaxis

elemento.desplazamiento

En la sintaxis dada, "elemento"De manera similar, corresponde al elemento que se calculará para la altura.

Ejemplo

• En primer lugar, incluya el "div"Elemento con el especificado"clase"Y un adjunto"el ratón por encima"Redirección de eventos a la función DivHeight ().
• A continuación, cree una tabla con los valores de encabezado y datos especificados.
• Del mismo modo, revive el método discutido para asignar un encabezado para mostrar la altura calculada en él:

IDENTIFICACIÓN.	Nombre	Edad
1	Harry	18
2	David	46

En el siguiente código JS, siga los pasos establecidos:

• Defina la función llamada "divheight ()".
• Acceder al "div" elemento.
• Finalmente, aplique el "desplazamientoPropiedad para devolver la altura de la tabla creada:

función divheight ()
Dejar getDiv = documento.QuerySelector ('.elemento');
Deja altura = getDiv.desplazamiento;
consola.log ("La altura del elemento div es:", +altura)

Producción

Enfoque 4: Obtenga la altura del elemento Div en JavaScript utilizando el enfoque jQuery

Este enfoque devuelve la altura del encabezado, así como el párrafo dentro del elemento Div con la ayuda de una biblioteca de jQuery.

Ejemplo

• En la siguiente demostración, incluya la biblioteca jQuery especificada para aplicar sus métodos.
• A continuación, especifique el "div"Y contiene el siguiente encabezado y párrafo que se calculará para la altura.
• Después de eso, revive los métodos discutidos para crear un botón y asignar un rumbo a la altura resultante que se mostrará en él:

Javascript

JavaScript es un lenguaje de programación muy efectivo que también se puede integrar con HTML para realizar varias funcionalidades adicionales en el diseño de una página web en particular o el sitio web. Esto da como resultado atraer a los usuarios y mejorar el diseño general de documentos.


Obtenga la altura del elemento Div

En el código dado a continuación:

• En el código jQuery, aplique el "listo()Método para ejecutar el código adicional tan pronto como se cargue el modelo de objeto de documento (DOM).
• Ahora, aplique el "hacer clic()Método "que ejecutará la función especificada en el clic del botón
• Por último, al hacer clic en el botón, acceda a "div"Elemento, y aplique el"altura()"Método para devolver su altura:

$ (documento)
.Ready (function ()
$ ("botón").hacer clic (function ()
var divheight = $ ("#elemento").altura();
$ ("#resultado").html ("La altura del elemento div es:" + divheight);
);
);

Producción

Este artículo compiló los enfoques para obtener la altura del elemento Div en JavaScript.

Conclusión

El "sin alientoT "propiedad, la"clientHeight"Propiedad, la"desplazamiento"Propiedad, o la"jQueryEl enfoque se puede utilizar para obtener la altura del elemento Div en JavaScript. La propiedad OffsetHeight se puede aplicar para calcular la altura externa del encabezado al que se accede sobre el botón Haga clic. La propiedad ClientHeight y la propiedad ScrollHeight se pueden optar por calcular la altura interna del elemento. El enfoque jQuery también se puede implementar mediante la inclusión de su biblioteca y utilizando sus métodos para realizar los cálculos requeridos. Este artículo demostró los enfoques que se pueden aplicar para obtener la altura del elemento Div en JavaScript.