Se puede obtener el ancho de un elemento HTML, incluido el ancho de ventana (window), utilizando diferentes propiedades y métodos en JavaScript.
Con esta propiedad, obtenemos el ancho de 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 es la bonita franja de color azul que ves abajo, donde ves el valor del ancho (width) en px de la ventana desde la que estes viendo la página, si tienes posibilidad redimensioná la ventana y veras como se actualiza este valor.
<body>
<div id="width_view"></div>
</body>
body {
margin: 0;
padding: 0;
font-size: 1.2em;
min-height: 100vh;
}
#width_view {
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
background: #32bacf;
color: white;
}
console.log(window.innerWidth);
const viewPortWidth = window.innerWidth;
const widthView = document.querySelector('#width_view');
widthView.innerHTML = viewPortWidth;
const getWindowWidth = () => {
widthView.innerHTML = window.innerWidth ||
document.documentElement.clientWidth;
};
window.addEventListener('resize', () => {
getWindowWidth()
})
console.log(viewPortWidth);
Con la propiedad offsetWidth obtenemos la cantidad total de espacio de un elemento horizontalmente, 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.
Observa esta propiedad en el siguiente ejemplo, cuyo resultado es el bonito cuadrado de color salmón de abajo, que puedes redimensionar en horizontal, recuerda que es un <div> etiqueta con comportamiento de bloque (display: block;).
<body>
<div class="cuadrado"></div>
</body>
.cuadrado {
width: 240px;
padding: 5px;
border: 5px solid black;
height: 200px;
resize: horizontal;
overflow: auto;
color: #fff;
background: rgba(255, 0, 0, .5);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
const cuadrado = document.querySelector(".cuadrado");
cuadrado.innerHTML = "offsetWidth = " +
cuadrado.offsetWidth + "px" + "
(width + padding + border)";
// 260 (240 width + 10 border + 10 padding)
const getCuadradoWidth = () => {
cuadrado.innerHTML = "offsetWidth = " +
cuadrado.offsetWidth + "px" + "
(width + padding + border)";
};
cuadrado.addEventListener('click', () => {
getCuadradoWidth()
})
// New Value
La propiedad offsetWidth del objeto de elemento devolverá el ancho real del elemento. En este caso, son 260 px, teniendo en cuenta que tengo establecido para el documento la propiedad box-sizing: content-box; ya que con el valor 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).
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.
La propiedad .offsetWidth no tendrá en cuenta los anchos de los márgenes o de la barra de desplazamiento cuando calcule el ancho de un elemento.
La propiedad clientWidth devuelve cuánto ocupa un elemento horizontalmente, incluido el relleno (padding), pero sin incluir el borde (border), los márgenes o las barras de desplazamiento.
La propiedad clientWidth es muy similar a offsetWidth. La única diferencia es que clientWidth ignorará el ancho del borde cuando calcule el ancho de un elemento.
Partiendo del ejemplo anterior, el resultado de obtener la propiedad .clientWidth, de nuestro objeto o elemento <div class="cuadrado"> nos arrojaría 250px.
const cuadrado = document.querySelector(".cuadrado");
// Puedes emplear getElementsByClassName o ById
console.log(cuadrado.clientWidth);
// 250 (240 width + 10 padding) ignora bordes
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
const cuadrado = document.querySelector(".cuadrado");
const cuadradoRect = cuadrado.getBoundingClientRect();
console.log(cuadradoRect.width); // 250
console.log(cuadrado.getBoundingClientRect()); // 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.
