Podemos obtener el ancho (width) y el alto (height) de elementos HTML, y el ancho y alto de la ventana (window), utilizando diferentes métodos de javascript.
También podemos obtener (leer), otras características geométricas de los elementos, que nos pueden servir, para moverlos o posicionarlos con javascript.
Con estos métodos, obtenemos el ancho y alto de la ventana (viewport), solo funciona sobre el objeto window, no para objetos de elementos HTML, para los que devolverá undefined.
Vamos a verlo con el siguiente ejemplo, puedes ver el sencillo código desplegándo las etiquetas y el resultado son las bonitas franjas azul y naranja que ves abajo, donde verás dinámicamente los valores del ancho (width) y alto (height) en px, de la ventana desde la que estes viendo la página, si tienes posibilidad redimensioná la ventana y veras como se actualizan los valores.
Las propiedades offsetWidth y offsetHeight, proporcionan el ancho y alto “exterior” del elemento o su tamaño completo, incluido el ancho del contenido, las barras de desplazamiento (si las hay), el relleno (padding) y el borde (border).
Eso es algo que no podiamos hacer con innerWidth, ya que solo funciona en el objeto window.
Vamos a observar estas propiedades, con el siguiente ejemplo de un contenedor, que puedes redimensionar, gracias a la propiedad resize. recuerda que es un <div> etiqueta con comportamiento de bloque (display: block;).
Las propiedades offsetWidth y offsetHeight del objeto de elemento devolverán el ancho y alto real del elemento. En este caso, son 260px y 220px, teniendo en cuenta que tengo establecido para el documento la propiedad box-sizing: content-box; ya que con el valor box-sizing: border-box;, el comportamiento de las cajas o elementos del documento es que su width total es con el padding y el border incluidos.
Al usar la propiedad offsetWidth, agregará las siguientes propiedades CSS para calcular el ancho del elemento:
width: 240px específicado en la regla CSS.
border: 5px por cada lado (border-left y border-right).
padding: 5px por cada lado (padding-left y padding-right).
Por su parte offsetHeight, empleará para el calculo del alto del elemento, las siguientes propiedades CSS:
height: 200px específicado en la regla CSS.
border: 5px por arriba y por abajo (border-top y border-bottom).
padding: 5px por arriba y por abajo (padding-top y padding-bottom).
Si el elemento no tuviera borde y relleno, .offsetWidth devolverá solo el ancho, osea width: 240px;.
¿Pero qué pasa si no declaramos el width: 240px; dentro de la regla CSS?, en ese caso... offsetWidth comprobará dos cosas:
1.- Si se trata de un elemento a nivel de bloque como <div>, <p>, <section>, etc., o un elemento en línea como <span>, <strong>, etc. Revisa el listado completo de etiquetas html
2.- Si hay algún contenido dentro de ese elemento.
Si no hay contenido ni ancho especificados en un elemento HTML, la propiedad .offsetWidth devuelve 0.
Si el elemento está a nivel de bloque sin ancho declarado pero con algún contenido, la propiedad .offsetWidth devolverá el ancho completo de la ventana (viewport).
Normalmente, un elemento a nivel de bloque llenará el ancho de su elemento padre tan pronto como le agreguemos algo de contenido.
Si el ancho del elemento de nivel de bloque se especifica dentro de la regla CSS, la propiedad .offsetWidth devolverá precisamente eso..., incluyendo el padding y el border.
Por otro lado, cuando el elemento HTML en línea tiene algún contenido, .offsetWidth devolverá el ancho del elemento en función de su tamaño de contenido.
Si desea agregar ancho al elemento HTML en línea a través de CSS, primero deberá convertirlo en un bloque en línea agregando la propiedad CSS display:inline-block;. Aprende más sobre la propiedad display.
Solo entonces, el valor de la propiedad width especificada en CSS será efectivo en los elementos en línea como <span>, <strong>, etc.
Las propiedades .offsetWidth y .offsetHeight no tendrán en cuenta los márgenes o las barras de desplazamiento (si los hubiera) cuando calcule el ancho y alto de un elemento.
Las propiedades clientWidth y clientHeight devuelve cuánto ocupa un elemento horizontal y verticalmente, incluidos los rellenos (padding), pero sin incluir los bordes (border), márgenes o barras de desplazamiento.
Estas propiedades son similares a offsetWidth y offsetHeight, con la única diferencia es que se ignora el ancho del borde.
Empleando el ejemplo anterior, el resultado de obtener las propiedades .clientWidth y .clientHeight, de nuestro objeto o elemento <div class="cuadrado"> nos arrojaría 250px y 210px.
Las propiedades .scrollWidth y .scrollHeight devuelven el tamaño real del contenido, independientemente de la cantidad de contenido visible en ese momento.
Es decir estamos hablando de contenido desplazable, vamos a verlo con el siguiente ejemplo, mira los códigos:
Tenemos dos <div>, siendo el padre, prácticamente de la mitad del tamaño, que el <div> anidado, por lo que hay contenido desplazable que no se visualiza.
Declararemos en el div principal, la propiedad overflow: auto; para que el navegador se encargue de las barras de desplazamiento necesarias para poder visualizar el contenido del div secundario.
Cuando se accede a las propiedades .scrollWidth y .scrollHeight del elemento div principal, se devuelven 490 píxeles, para cada propiedad.
Para el calculo de .scrollWidth, se emplean las siguientes propiedades:
1.- El ancho (width) del elemento interno si es mayor que el principal: 400px;
2.- padding del elemento principal: 40px; (20px padding-left + 20px padding-right)
3.- padding del elemento secundario: 40px (20px padding-left + 20px padding-right)
4.- border del elemento secundario: 10px (5px border-left + 5px border-right)
Total los 490px que nos devuelve la propiedad.
Para el calculo de .scrollHeight, se emplean las siguientes propiedades:
1.- El alto (height) del elemento interno si es mayor que el principal: 400px;
2.- padding del elemento principal: 40px; (20px padding-top + 20px padding-bottom)
3.- padding del elemento secundario: 40px (20px padding-top + 20px padding-bottom)
4.- border del elemento secundario: 10px (5px border-top + 5px border-bottom)
Total los 490px que nos devuelve la propiedad.
Observar que imprimo también las propiedades .offsetWidth, .offsetHeight, .clientWidth y .clientHeight del div principal, para ver como devuelve el width + padding + border, que tiene declarados en el CSS, no se tienen en cuenta el width ni el padding, del div secundario.
Por último para comprobar la cualidad de contenido desplazable, he agregado botones que al cliclarlos, redimensionán el contenedor, a sus valores de .scrollWidth y .scrollHeignt, respectivamente.
El método getBoundingClientRect() devolverá el objeto DOMRect.
El objeto DOMRect tiene información sobre la ubicación y la dimensión del elemento como números flotantes después de completar las transformaciones CSS.
Podemos obtener fácilmente el ancho accediendo a la propiedad width en el objeto DOMRect
El método getBoundingClientRect() devuelve un objeto que tiene las siguientes propiedades:
width: el ancho del elemento, incluido el ancho real especificado en el CSS + el border-left y border-right e ignora el padding.
height: la altura del elemento, incluida la altura real especificada en el CSS + el border-top y border-bottom e ignora el padding.
x: ubicación horizontal del elemento en la ventana gráfica.
y: ubicación vertical del elemento en la ventana gráfica.
left: ubicación del lado izquierdo del elemento en la ventana gráfica.
right: ubicación del lado derecho del elemento en la ventana gráfica.
top: ubicación del lado superior del elemento en la ventana gráfica.
bottom: ubicación del lado inferior del elemento en la ventana gráfica.
Puedes observar todo esto con la consola de la herramienta dev tools de tu navegador, y te preguntarás para que me sirve todo esto, pues puedes ver un ejemplo práctico, del uso de estas propiedades en mi página sobre animaciones al scroll.
