Atributo offsetWidth del elemento DOM HTML

Definición y uso

offsetWidth El atributo devuelve el ancho visible del elemento (en píxeles), incluyendo el relleno, el borde y la barra de desplazamiento, pero sin incluir el margen.

offsetWidth El atributo es de solo lectura.

Vea también:Tutoriales de modelo de cuadro CSS

offsetParent

Todos los elementos de bloques informan las cantidades de desplazamiento con respecto al padre de desplazamiento:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

El padre de desplazamiento se refiere al antepasado más cercano con una posición no estática.

Si no existe el padre de desplazamiento, el desplazamiento es con respecto al texto principal del documento.

Vea también:

Atributo offsetHeight

Atributo offsetParent

Atributo offsetTop

Atributo offsetLeft

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Ejemplo

Ejemplo 1

Obtener la altura y anchura de "myDIV", incluyendo el relleno y el borde:

const elmnt = document.getElementById("myDIV");
let text = "Altura con relleno y borde: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno y borde: " + elmnt.offsetWidth + "px";

Prueba por ti mismo

Ejemplo 2

Diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth

Sin barra de desplazamiento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura con relleno: " + elmnt.clientHeight + "px<br>";
text += "Altura con relleno y borde: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno: " + elmnt.clientWidth + "px<br>";
text += "Ancho con relleno y borde: " + elmnt.offsetWidth + "px";

Prueba por ti mismo

Con barra de desplazamiento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura con relleno: " + elmnt.clientHeight + "px<br>";
text += "Altura con relleno, borde y barra de desplazamiento: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno: " + elmnt.clientWidth + "px<br>";
text += "Ancho con relleno, borde y barra de desplazamiento: " + elmnt.offsetWidth + "px";

Prueba por ti mismo

Sintaxis

element.offsetWidth

Valor de retorno

Tipo Descripción
Número Ancho visible del elemento (en píxeles), incluyendo el relleno, el borde y la barra de desplazamiento.

Compatibilidad del navegador

Todos los navegadores lo admiten element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte