Propriedade HTML DOM offsetWidth
Exemplo
Obtenha a altura e a largura de um elemento <div>, incluindo preenchimento e borda:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade offsetWidth retorna a largura visível de um elemento em pixels, incluindo preenchimento, borda e barra de rolagem, mas não a margem.
A razão pela qual a palavra "visível" é especificada é porque se o conteúdo do elemento for mais largo que a largura real do elemento, esta propriedade retornará apenas a largura que estiver visível (consulte "Mais exemplos").
Nota: Para entender esta propriedade, você deve entender o CSS Box Model .
Dica: Esta propriedade é frequentemente usada em conjunto com a propriedade offsetHeight .
Dica: Use as propriedades clientHeight e clientWidth para retornar a altura e a largura visíveis de um elemento, incluindo apenas o preenchimento.
Dica: Para adicionar barras de rolagem a um elemento, use a propriedade CSS overflow .
Esta propriedade é somente leitura.
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Sintaxe
element.offsetWidth
Detalhes técnicos
Valor de retorno: | Um número, representando a largura visível de um elemento em pixels, incluindo preenchimento, borda e barra de rolagem |
---|
Mais exemplos
Exemplo
Este exemplo demonstra a diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Exemplo
Este exemplo demonstra a diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth, quando adicionamos uma barra de rolagem ao elemento:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";