Elemento HTML DOM clientWidth
❮ O Objeto ElementoExemplo
Obtenha a altura e a largura de "myDIV", incluindo o preenchimento:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Mais exemplos abaixo.
Definição e uso
A clientWidth
propriedade retorna a largura visível de um elemento em pixels, incluindo preenchimento, mas não a borda, barra de rolagem ou margem.
A clientWidth
propriedade é somente leitura.
Tutorial:
Veja também:
A propriedade clientHeight do elemento
A propriedade offsetHeight do elemento
A propriedade offsetWidth do elemento
Para adicionar barras de rolagem a um elemento, use a propriedade CSS overflow .
Sintaxe
element.clientWidth
Valor de retorno
Modelo | Descrição |
Número | A largura visível de um elemento (em pixels), incluindo preenchimento. |
A diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth
Sem uma barra de rolagem:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Com uma barra de rolagem:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Suporte ao navegador
element.clientWidth
é suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ O Objeto Elemento