Atributo offsetWidth do Elemento DOM HTML

Definição e uso

offsetWidth O atributo retorna a largura visível do elemento (em pixels), incluindo margem interna, borda e barra de rolagem, mas não incluindo margem externa.

offsetWidth O atributo é somente leitura.

Veja também:Tutorial do modelo de caixa CSS

offsetParent

Todos os elementos de bloco relatam o offset em relação ao pai de offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Pai de offset é o ancestral mais próximo com posição não estática.

Se não existir pai de offset, o offset é relativo ao corpo do documento.

Veja também:

Atributo offsetHeight

Atributo offsetParent

Atributo offsetTop

Atributo offsetLeft

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Exemplo

Exemplo 1

Obter a altura e largura do "myDIV", incluindo margem interna e borda:

const elmnt = document.getElementById("myDIV");
let text = "Altura com preenchimento e borda: " + elmnt.offsetHeight + "px<br>";
text += "Largura com margem interna e borda: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Exemplo 2

Diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth

Sem barra de rolagem:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura com margem interna: " + elmnt.clientHeight + "px<br>";
text += "Altura com margem interna e borda: " + elmnt.offsetHeight + "px<br>";
text += "Largura com margem interna: " + elmnt.clientWidth + "px<br>";
text += "Largura com margem interna e borda: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Com barra de rolagem:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura com margem interna: " + elmnt.clientHeight + "px<br>";
text += "Altura com margem interna, borda e barra de rolagem: " + elmnt.offsetHeight + "px<br>";
text += "Largura com margem interna: " + elmnt.clientWidth + "px<br>";
text += "Largura com margem interna, borda e barra de rolagem: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Sintaxe

element.offsetWidth

Retorno

Tipo Descrição
Número Largura visual do elemento (em pixels), incluindo margem interna, borda e barra de rolagem.

Suporte do navegador

Todos os navegadores suportam element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte