Propiedad offsetWidth del DOM HTML

Objeto Elemento de HTML DOM

offsetWidthPropiedad de solo lectura que devuelve la anchura del elemento en forma de entero, incluyendo el relleno horizontal y el borde.

Por lo general, offsetWidth es la medida en píxeles de la anchura del elemento CSS, incluyendo cualquier borde, relleno y barra de desplazamiento vertical (si hay alguna). No incluye la anchura de los elementos pseudo, como:: beforeo:: after.

Para entender esta propiedad, debe conocerModelo de cuadro CSS.

Se utilizaclientHeightyclientWidthLa propiedad devuelve la altura y anchura visibles del elemento, incluyendo el relleno, pero no el borde, el margen y la barra de desplazamiento (si existe).

Sintaxis:

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Altura incluyendo relleno y borde: "　+　elem.offsetHeight　+　"px<br>";
txt　+Ancho incluyendo relleno y borde: "　+　elem.offsetWidth　+　"px";

Compatibilidad del navegador

Todos los navegadores soportan completamente el atributo offsetWidth:

Detalles técnicos

Más ejemplos

Este ejemplo muestra la diferencia entre clientWidth y offsetWidth:

var elem = document.querySelector("div");
var txt = "Ancho" incluyendo "padding": ""　+　elem.clientWidth　+　"px<br>";
txt　+= "Ancho" incluyendo "padding"　+　border: ""　+　elem.offsetWidth　+　"px";

Referencias relacionadas

Referencia de HTML DOM:Atributo offsetHeight

Referencia de HTML DOM:Atributo offsetLeft

Referencia de HTML DOM:Atributo offsetTop

Referencia de HTML DOM:Atributo offsetParent

Objeto Elemento de HTML DOM