Propiedad offsetWidth

La propiedad offsetWidth contiene el ancho completo del elemento (incluye el ancho propio del elemento, el ancho de los bordes, el relleno interior, las barras de desplazamiento):

Sintaxis

elemento.offsetWidth;

Ejemplo

Vamos a averiguar el tamaño completo del elemento:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	padding: 15px;
	border: 10px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

Resultado de ejecutar el código:

150

Ejemplo

Si el elemento está oculto, entonces offsetWidth es 0:

<div id="elem"></div>

#elem {
	display: none; /* elemento oculto */
	width: 100px;
	height: 100px;
	padding: 15px;
	border: 10px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

Resultado de ejecutar el código:

0

Véase también

propiedad clientWidth,
que contiene el ancho del elemento dentro de los bordes
propiedad offsetHeight,
que contiene la altura completa del elemento
método getComputedStyle,
que obtiene el valor de la propiedad CSS del elemento