JavaScript en tiempo de ejecución: altura de div

Escrito por sue smith Google | Traducido por jaime alvarez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
JavaScript en tiempo de ejecución: altura de div
Las funciones de JavaScript pueden ejecutarse mientras el usuario está viendo una página. (Goodshoot/Goodshoot/Getty Images)

Las funciones de JavaScript en una página de Internet pueden obtener y establecer las propiedades de los elementos HTML. A veces, cuando una página se configura para alterar su contenido dinámicamente a medida que el usuario interactúa con ella, es difícil saber de antemano el espacio que un elemento en particular ocupará. Incluyendo funciones de JavaScript para correr en tiempo de ejecución mientras que el usuario está viendo una página, los desarrolladores pueden establecer las dimensiones reales ocupadas por un elemento tal como un div, incluyendo la altura.

Otras personas están leyendo

Altura CSS

Las funciones de JavaScript pueden acceder a las propiedades de la altura de cualquier elemento HTML en una página. Esto incluye cualquier declaración de Hoja de Estilo en Cascada (CSS, por sus siglas en inglés) que involucran la altura, como el siguiente código de ejemplo muestra:

document.getElementById("mydiv").style.height;

Este código recupera el valor de la altura CSS para el elemento div con "mydiv" como su atributo ID. El elemento puede aparecer en la página de la siguiente manera:

<div id="mydiv" style="height:100px"> Contenido aquí </div>

Alternativamente, puedes establecer la declaración CSS en un archivo CSS independiente o una sección en la cabecera de la página.

Altura del cliente

JavaScript puede devolver la altura dell cliente para un elemento div, lo que indica la altura ocupada por el elemento en la página de la manera que se muestra al usuario que la está viendo, como muestra el código siguiente:

document.getElementById("mydiv").clientHeight;

El atributo "clientHeight" se puede utilizar con cualquier elemento HTML, incluyendo divs. No se incluyen los márgenes, barras de desplazamiento o las fronteras dentro del elemento, sólo el contenido. Si un elemento div es desplazable, con su contenido no visible al mismo tiempo, la altura del cliente no indicará la altura total del elemento, sólo la altura de lo que el usuario puede ver.

Altura de compensación

La altura de compensación de un elemento div es la altura real que ocupa dentro de la página, sin incluir los márgenes, pero incluyendo el relleno y las fronteras, como muestra el código siguiente:

document.getElementById("mydiv").offsetHeight;

La propiedad "offsetHeight" se aplica a cualquier elemento HTML, no sólo divs. Las alturas de compensación y la de cliente son las mismas si el elemento div no se acompaña de barras de desplazamiento y no tiene un borde en cualquiera de sus cuatro lados.

Altura de desplazamiento

La altura de desplazamiento de un elemento permite a los desarrolladores acceder al valor de la altura total, independientemente de lo que es visible en un momento dado. Si un elemento div utiliza barras de desplazamiento para el desplazamiento vertical, el usuario no podrá ver todo su contenido a la vez. El siguiente código de ejemplo muestra la recuperación de la altura total de un elemento div:

document.getElementById("mydiv").scrollHeight;

Esto puede ser útil en los casos en que necesites conocer la altura real de un elemento cuando el contenido se rellena de forma dinámica. Si el elemento no utiliza barras de desplazamiento, la altura de desplazamiento y la del cliente son iguales.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles