Propriedade offsetWidth do HTML DOM

Objeto Elemento do HTML DOM

offsetWidthPropriedade de leitura que retorna a largura do elemento em forma de inteiro, incluindo preenchimento horizontal e borda.

Normalmente, o offsetWidth é a medida em pixels da largura do elemento CSS, incluindo qualquer borda, preenchimento e barra de rolagem vertical (se houver). Ele não inclui a largura dos elementos pseudo, por exemplo:: beforeou:: after.

Para entender essa propriedade, você deve entenderModelo de Caixa CSS.

UsarclientHeighteclientWidthA propriedade retorna a altura e largura visíveis do elemento, incluindo preenchimento, mas não incluindo borda, margem e barra de rolagem (se houver).

Sintaxe:

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Altura incluindo preenchimento e borda: "　+　elem.offsetHeight　+　"px<br>";
txt　+= "Largura incluindo preenchimento e borda: "　+　elem.offsetWidth　+　"px";

Compatibilidade do Navegador

Todos os navegadores suportam completamente a propriedade offsetWidth:

Detalhes Técnicos

Mais Exemplos

Este exemplo demonstra a diferença entre clientWidth e offsetWidth:

var elem = document.querySelector("div");
var txt = "Width contém padding: "　+　elem.clientWidth　+　"px<br>";
txt　+= "Width contém padding"　+　border: ""　+　elem.offsetWidth　+　"px";

Referências Relacionadas

Referência do HTML DOM:Propriedade offsetHeight

Referência do HTML DOM:Propriedade offsetLeft

Referência do HTML DOM:Propriedade offsetTop

Referência do HTML DOM:Propriedade offsetParent

Objeto Elemento do HTML DOM