Elemento HTML DOM clientHeight
❮ 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 clientHeight
propriedade retorna a altura visível de um elemento em pixels, incluindo preenchimento, mas não a borda, barra de rolagem ou margem.
A clientHeight
propriedade é somente leitura.
Tutorial:
Veja também:
A propriedade clientWidth 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.clientHeight
Valor de retorno
Modelo | Descrição |
Número | A altura visível do 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.clientHeight
é suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ O Objeto Elemento