in

JavaScript offsetHeight – javatpoint

javascript offsetheight

los offsetHeight es una propiedad DOM de HTML, que es utilizada por el lenguaje de programación JavaScript. Devuelve la altura visible de un elemento en píxeles que incluye la altura del contenido visible, el borde, el relleno y la barra de desplazamiento, si está presente. OffsetHeight se utiliza a menudo con la propiedad offsetWidth. los offsetWidth es una propiedad más de HTML DOM, que es casi la misma que offsetHeight. JavaScript utiliza estas propiedades para encontrar la altura y el ancho visibles de los elementos HTML.

OffsetHeight es una combinación de los siguientes elementos HTML:

Por otro lado, offsetWidth incluye los siguientes elementos:

Recuerde una cosa que offsetHeight y offsetWidth no incluyen margen, ni margen superior ni margen inferior. El lenguaje de programación JavaScript utiliza estas propiedades DOM para calcular la dimensión de los elementos HTML en píxeles.

Con la ayuda del siguiente diagrama, puede comprender mucho mejor offsetHeight y offsetWidth:

JavaScript offsetHeight

Soporte del navegador

La propiedad offsetHeight DOM es compatible con varios navegadores web, como Chrome e Internet Explorer. A continuación se muestran algunos navegadores que admiten la propiedad offsetHeight y offsetWidth.

Sintaxis

A continuación se muestra una sintaxis simple de offsetHeight:

Aquí, el elemento es una variable creada en JavaScript para contener los valores de las propiedades CSS o el párrafo de texto HTML.

Valores devueltos

OffsetHeight y offsetWidth devuelven la altura y el ancho calculados de los elementos HTML en píxeles, respectivamente.

Ejemplos de

A continuación se muestra una lista de algunos ejemplos. Con la ayuda de lo cual veremos cómo se usa y funciona la propiedad offsetHeight.

Ejemplo 1

Producción

Vea el resultado a continuación que contiene un párrafo en color amarillo resaltado y un botón de envío. Haga clic en este Enviar y calcular el offsetHeight de este párrafo.

Salida antes de hacer clic en el botón Enviar

JavaScript offsetHeight

Salida después de hacer clic en el botón Enviar

El offsetHeight calculado se mostrará dentro de esta área resaltada en amarillo.

JavaScript offsetHeight

Ejemplo 2

En este ejemplo, calcularemos el offsetHeight para un párrafo proporcionado en este ejemplo junto con el estilo CSS. Recuerde que offsetHeight no incluirá el margen.

Producción

Vea el resultado a continuación que contiene un párrafo en color rosa resaltado y un botón de envío. Haga clic en este Calcular offsetHeight y calcular el offsetHeight de este párrafo.

Salida antes de hacer clic en el botón Calcular altura de compensación

JavaScript offsetHeight

Salida después de hacer clic en el botón Calcular altura de compensación

El offsetHeight calculado se mostrará dentro de esta área resaltada en rosa. En la siguiente captura de pantalla, puede ver que offsetHeight para el párrafo dado es 230px.

JavaScript offsetHeight

Ejemplo 3 sin estilo CSS

Vea otro ejemplo de cálculo de offsetHeight. No hemos incluido ningún estilo CSS como altura, ancho, margen, relleno, etc., espere color de fondo. Entonces, el párrafo será un párrafo simple sin estilo.

Producción

Vea el resultado a continuación que contiene un párrafo en color naranja resaltado y un botón de envío para calcular el offsetHeight. Haga clic en este Calcular offsetHeight y calcule el offsetHeight de este párrafo.

Antes de hacer clic en el botón Calcular altura de compensación

JavaScript offsetHeight

Después de hacer clic en el botón Calcular altura de compensación

En la siguiente captura de pantalla, puede ver que offsetHeight para el párrafo dado es 88px.

JavaScript offsetHeight

Calcule tanto offsetHeight como offsetWidth

En este ejemplo, calcularemos tanto offsetHeight y offsetWidth para un párrafo dentro de una pestaña div. Entonces, puede comprender cuán diferente calcularon. Aquí, usaremos CSS y pasaremos la altura, el ancho, el margen, el relleno, etc. para el estilo en este ejemplo.

Copie y ejecute el siguiente código en su sistema para comprenderlo mejor.

Producción

Vea el resultado a continuación que contiene un párrafo en el área de color resaltada en azul claro y un botón de envío. Haga clic en este Enviar y calcule el offsetHeight y el offsetWidth de este párrafo.

Salida antes de hacer clic en el botón Enviar

JavaScript offsetHeight

Después de hacer clic en el Enviar , el offsetHeight calculado es 210px y el offsetWidth es 430px que se muestra dentro de esta área resaltada en azul claro. Vea el resultado a continuación.

Salida después de hacer clic en el botón Enviar

JavaScript offsetHeight

Ha visto varios ejemplos con diferentes parámetros de cálculo. En estos diversos ejemplos, hemos pasado el párrafo de texto con o también sin estilo CSS y luego calculamos por separado offsetHeight y offsetWidth.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

00rUcaX8XMS7paUHP5ijjgc 1.1634490808.fit lim.size 1200x630

La NASA lanza su misión ‘Lucy’ para explorar asteroides troyanos

typescript set ouput1

Conjunto de TypeScript – javatpoint