Propriedade clientWidth do elemento HTML DOM

Definição e uso

clientWidth A propriedade retorna a largura visual do elemento, incluindo margens internas, mas não incluindo bordas, barras de rolagem ou margens externas, em pixels.

clientWidth A propriedade é só de leitura.

Veja também:Tutorial de modelo de caixa CSS

Veja também:

Propriedade clientHeight

Propriedade clientTop

Propriedade clientLeft

Propriedade offsetHeight

Propriedade offsetWidth

Para adicionar uma barra de rolagem ao elemento, use Propriedade overflow do CSS.

Exemplo

Exemplo 1

Obter a altura e largura de "myDIV", incluindo margens internas:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Experimente você mesmo

Exemplo 2

Exemplo 2: Diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth

Sem barra de rolagem:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Experimente você mesmo

Com barra de rolagem:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Experimente você mesmo

Sintaxe

element.clientWidth

Retorno

Tipo Descrição
Número Largura visual do elemento (em pixels), incluindo margens internas.

Suporte do navegador

Todos os navegadores suportam element.clientWidth:

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