Propriedade clientWidth do DOM HTML

Objeto Elemento DOM HTML

clientWidthPropriedade de leitura apenas que retorna a largura visível do elemento (em pixels), incluindo preenchimento, mas não incluindo margem, borda e barra de rolagem vertical (se houver).

A fórmula de cálculo do clientWidth é a seguinte: largura CSS + Preenchimento CSS-a largura da barra de rolagem vertical (se houver).

Para entender essa propriedade, você deve entenderModelo de Caixa CSS.

Uso:offsetWidthA propriedade pode retornar a largura visível do elemento, incluindo preenchimento, borda e barra de rolagem vertical.

Sintaxe:

element.clientWidth

var elem = document.querySelector("div");
var txt = "Altura que inclui preenchimento: "　+　elem.clientHeight　+　"px<br>";
txt　+=　"Largura inclui preenchimento: "　+　elem.clientWidth　+　"px";

Compatibilidade do Navegador

Todos os navegadores suportam completamente a propriedade clientWidth:

Detalhes Técnicos

Mais Exemplos

Este exemplo demonstra a diferença entre clientWidth e offsetWidth:

var elem = document.querySelector("div");
var txt = "Largura inclui preenchimento: "　+　elem.clientWidth　+　"px<br>";
txt　+=　"Largura inclui preenchimento+Borda:　"　+　elem.offsetWidth　+　"px";

Referências Relacionadas

Referência DOM HTML:Propriedade offsetWidth DOM HTML

Referência DOM HTML:Propriedade scrollWidth DOM HTML

Referência CSS:Propriedade overflow do CSS

Objeto Elemento DOM HTML