Propriedade clientHeight do Elemento DOM HTML

Definição e uso

clientHeight A propriedade retorna a altura visível do elemento, incluindo margem interna, mas não inclui borda, barra de rolagem ou margem externa, em pixels.

clientHeight A propriedade é apenas de leitura.

Veja também:Tutorial de modelo de caixa CSS

Veja também:

Propriedade clientWidth

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 margem interna:

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

Experimente você mesmo

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.clientHeight

Retorno

Tipo Descrição
Número Altura visível do elemento (em pixels), incluindo margem interna.

Suporte do navegador

Todos os navegadores suportam element.clientHeight:

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