El desplazamientoAltura es una propiedad HTML DOM, 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 usa a menudo con la propiedad offsetWidth. El ancho de desplazamiento es una propiedad más de HTML DOM, que es casi igual 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:
offsetHeight = height + border + padding + horizontal scrollbar
Por otro lado, el offsetWidth incluye los siguientes elementos:
offsetWidth = width + border + padding + vertical scrollbar
Recuerde una cosa: offsetHeight y offsetWidth no incluyen el margen, ni el margen superior ni el margen inferior. Estas propiedades DOM son utilizadas por lenguaje de programación javascript para calcular la dimensión de los elementos HTML en píxeles.
Con la ayuda del siguiente diagrama puedes entender offsetHeight y offsetWidth mucho mejor:
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 las propiedades offsetHeight y offsetWidth.
| Navegador |  Cromo |  explorador de Internet |  Firefox |  Ópera |  Safari |  Borde |
| soporte de altura compensada | Sí | Sí | Sí | Sí | Sí | Sí |
Sintaxis
A continuación se muestra una sintaxis simple de offsetHeight:
knn
element.offsetHeight
Aquí, elemento es una variable creada en JavaScript para contener los valores de las propiedades CSS o el párrafo de texto HTML.
Valores de retorno
offsetHeight y offsetWidth devuelven la altura y el ancho calculados de los elementos HTML en píxeles, respectivamente.
Ejemplos
A continuación se muestra una lista de algunos ejemplos. Con la ayuda del cual veremos cómo se utiliza y funciona la propiedad offsetHeight.
Ejemplo 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit Producción
Vea el resultado a continuación que contiene un párrafo resaltado en amarillo y un botón de enviar. Haga clic en esto Entregar y calcule el desplazamiento de altura de este párrafo.
Salida antes de hacer clic en el botón Enviar
Salida después de hacer clic en el botón Enviar
La altura de desplazamiento calculada se mostrará dentro de esta área resaltada en amarillo.
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á margen.
igualdad de cadenas en java
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Producción
Vea el resultado a continuación que contiene un párrafo resaltado en rosa y un botón de enviar. Haga clic en esto Calcular altura de desplazamiento y calcule el desplazamiento de altura de este párrafo.
Salida antes de hacer clic en el botón Calcular altura de desplazamiento
Salida después de hacer clic en el botón Calcular altura de desplazamiento
La altura de desplazamiento calculada 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.
Ejemplo 3 sin estilo CSS
Vea otro ejemplo de cálculo de offsetHeight. No hemos incluido ningún estilo CSS como alto, ancho, margen, relleno, etc., excepto el color de fondo. Entonces, el párrafo será un párrafo simple sin estilo.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Producción
ipconfig en Ubuntu
Vea el resultado a continuación que contiene un párrafo resaltado en color naranja y un botón de envío para calcular la altura del desplazamiento. Haga clic en esto Calcular altura de compensación y calcule el desplazamiento de altura de este párrafo.
Antes de hacer clic en el botón Calcular altura de desplazamiento
Después de hacer clic en el botón Calcular altura de desplazamiento
En la siguiente captura de pantalla, puede ver que offsetHeight para el párrafo dado es 88px.
Calcule tanto offsetHeight como offsetWidth
En este ejemplo, calcularemos ambos desplazamientoAltura y ancho de desplazamiento para un párrafo dentro de una pestaña div. Entonces, puedes entender cuán diferente calcularon. Aquí, usaremos CSS y pasaremos la altura, el ancho, el margen, el relleno, etc. para aplicar estilo en este ejemplo.
Copie y ejecute el siguiente código en su sistema para comprenderlo mejor.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit Producción
Vea el resultado a continuación que contiene un párrafo en un área de color resaltada en azul claro y un botón de enviar. Haga clic en esto Entregar y calcule el desplazamientoHeight y el offsetWidth de este párrafo.
Salida antes de hacer clic en el botón Enviar
Después de hacer clic en el Entregar botón, 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
Ha visto varios ejemplos con diferentes parámetros de cálculo. En estos diversos ejemplos, pasamos el párrafo de texto con o sin estilo CSS y luego calculamos por separado el offsetHeight y el offsetWidth.