Exemplo
Obter a altura ea largura de um <div> elemento, incluindo padding:
var elmnt = document.getElementById("myDIV");
var txt =
"Height with padding: " + elmnt.clientHeight + "px<br>";
txt +=
"Width with padding: " + elmnt.clientWidth + "px";
O resultado do txt será:
Height with padding: 270px
Width with padding: 420px
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade clientWidth retorna a largura visível de um elemento em pixels, incluindo estofamento, mas não a fronteira, barra de rolagem ou 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 clientHeight propriedade.
Dica: Use as offsetHeight e offsetWidth propriedades para retornar a altura visível e largura de um elemento, incluindo espaçamento, borda e barra de rolagem.
Dica: Para adicionar barras de rolagem para um elemento, use o CSS estouro propriedade.
Esta propriedade é somente leitura.
Suporte navegador
Propriedade | |||||
---|---|---|---|---|---|
clientWidth | sim | sim | sim | sim | sim |
Sintaxe
element .clientWidth
Detalhes técnicos
Valor de retorno: | Um número, que representa a largura de um elemento visível em pixels, incluindo estofamento |
---|
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 "