Propriedade clientHeight do DOM HTML

Objeto Elemento DOM HTML

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

A clientHeight pode ser calculada como: Altura CSS+ Preenchimento CSS-a altura da barra de rolagem horizontal (se houver).

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

UsaroffsetHeightA propriedade retorna a altura visível do elemento, incluindo preenchimento, borda e barra de rolagem horizontal.

Sintaxe:

element.clientHeight

var elem = document.querySelector("div");
var txt = "Altura incluída na preenchimento: "　+　elem.clientHeight　+　"px<br>";
txt　+= "Largura incluída na preenchimento: "　+　elem.clientWidth　+　"px";

Compatibilidade do Navegador

Todos os navegadores suportam completamente a propriedade clientHeight:

Detalhes Técnicos

Mais Exemplos

Este exemplo demonstra a diferença entre clientHeight e offsetHeight:

var elem = document.querySelector("div");
var txt = "Altura　+　padding: "　+　elem.clientHeight　+　"px<br>";
txt　+= "Altura　+　padding　+　border: "　+　elem.offsetHeight　+　"px";

Referência Relacionada

Referência DOM HTML:Propriedade offsetHeight DOM HTML

Referência DOM HTML:Propriedade scrollHeight DOM HTML

Referência CSS:Propriedade overflow do CSS

Objeto Elemento DOM HTML