tutoriais mais recente desenvolvimento web
 

HTML DOM offsetWidth Propery

<Elemento de objeto

Exemplo

Obter a altura ea largura de um <div> elemento, incluindo o 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";

O resultado do txt será:

Height with padding and border: 280px
Width with padding and border: 430px
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

A propriedade offsetWidth retorna a largura visível de um elemento em pixels, incluindo espaçamento, borda e barra de rolagem, mas não a margem.

A razão pela qual o "viewable" palavra é especificado, é porque se o conteúdo do elemento é maior que a largura real do elemento, este estabelecimento só retornará a largura que é visível (See "More Examples") .

Nota: Para compreender essa propriedade, você deve compreender o modelo CSS Box .

Dica: Esta propriedade é muitas vezes usado em conjunto com o offsetHeight propriedade.

Dica: Use as clientWidth e clientHeight propriedades para voltar a altura visível e a largura de um elemento, incluindo apenas o preenchimento.

Dica: Para adicionar barras de rolagem para um elemento, use o CSS estouro propriedade.

Esta propriedade é somente leitura.

Suporte navegador

Propriedade
offsetWidth sim sim sim sim sim

Sintaxe

element .offsetWidth

Detalhes técnicos

Valor de retorno: Um número, que representa a largura de um elemento visível em pixels, incluindo estofamento, fronteira e barra de posicionamento
Exemplos

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";

O resultado do txt será:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Tente você mesmo "

Exemplo

Este exemplo demonstra a diferença entre clientHeight / clientWidth e offsetHeight / offsetWidth, quando adicionar uma barra de rolagem para o 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";

O resultado do txt será:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Tente você mesmo "

<Elemento de objeto