Obtenha a altura do elemento div em JavaScript
Em HTML, quaisquer propriedades CSS que você fornece a um elemento usando folhas de estilo CSS ou usando JavaScript são definidas dentro do Document Object Model (DOM). Por meio desse DOM, você pode acessar facilmente esses valores posteriormente dentro do código JavaScript. Existem várias maneiras de obter os valores das propriedades CSS dentro do JavaScript. Este artigo irá apresentar como obter a propriedade CSS height de nosso código JavaScript.
Abaixo está o documento HTML que criamos. Dentro, temos uma tag body contendo apenas um único elemento div com um id de container. Na tag head, fornecemos alguns estilos básicos para nosso elemento div, como largura, altura, borda, preenchimento, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
Resultado:
Se você executar o documento HTML acima, verá um retângulo como este na janela do seu navegador.
Agora que temos tudo configurado, vamos aplicar várias propriedades neste elemento div container para obter sua altura. O código que iremos escrever irá dentro das tags <script></script> presentes dentro da tag body.
Várias maneiras de obter a altura dos elementos div em JavaScript
Primeiro, obteremos a referência do elemento container do HTML DOM usando o método getElementById(). Em seguida, armazenaremos esse elemento dentro da variável element em JavaScript.
let element = document.getElementById('container');
Agora que temos o elemento div, vamos obter a altura do div usando várias propriedades usando JavaScript.
1. clientHeight
O clientHeight retorna a altura de um elemento incluindo o preenchimento como um valor inteiro.
console.log(element.clientHeight);
Resultado:
58
Como adicionamos preenchimento de 4px a todos os quatro lados do contêiner enquanto calculamos a altura, que atualmente é de 50px, o preenchimento de 4px superior e 4px inferior, ou seja, o preenchimento total de 8px ser adicionado à altura. Isso resultará em uma altura total de 58px.
2. offsetHeight
O offsetHeight consiste na altura do elemento, que também inclui qualquer preenchimento, bordas e barra de rolagem horizontal (se houver).
console.log(element.offsetHeight);
Resultado:
60
Semelhante à propriedade clientHeight, a propriedade offsetHeight também terá o preenchimento de 8px, a altura do conteúdo que é 50px e também a largura da borda que é 1px superior e 1px inferior, que é um total de 2px . Portanto, a altura total retornada por esta propriedade será 8 + 50 + 2, ou seja, 60px.
3. scrollHeight
O scrollHeight retorna a altura do conteúdo, incluindo o conteúdo que não está visível na tela devido ao estouro. Inclui apenas o preenchimento do elemento, mas não a borda, margem ou barra de rolagem horizontal.
O scrollHeight é semelhante ao clientHeight. A única diferença entre clientHeight e scrollHeight é que scrollheight também pode incluir a altura do conteúdo, que atualmente não está visível na tela devido ao estouro.
console.log(element.scrollHeight);
Resultado:
58
A altura do conteúdo é 50px e o preenchimento total é 8px. Portanto, a altura total retornada pela propriedade scrollHeight é 58px.
4. getBoundingClientRect()
O método getBoundingClientRect() retorna um objeto que contém informações relacionadas à largura e altura do elemento, bem como sua posição (x, y, topo, esquerda, etc) em relação à janela de visualização. A altura calculada por este método também contém preenchimento e bordas.
console.log(element.getBoundingClientRect().height);
Resultado:
60
Portanto, para obter a altura do elemento do objeto retornado pelo método getBoundingClientRect(), temos que usar a tecla height para obter a altura. Aqui, a altura do elemento é 50px, o preenchimento é 8px e a largura da borda é 2px. Portanto, uma altura total de 60px será retornada por esta função.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn