Obtenir la hauteur de l'élément div en JavaScript
En HTML, quelles que soient les propriétés CSS que vous fournissez à un élément, soit à l’aide de feuilles de style CSS, soit à l’aide de JavaScript, elles sont définies dans le Document Object Model (DOM). Grâce à ce DOM, vous pouvez facilement accéder à ces valeurs ultérieurement dans le code JavaScript. Il existe différentes manières d’obtenir les valeurs des propriétés CSS dans JavaScript. Cet article présentera comment obtenir la propriété CSS height à partir de notre code JavaScript.
Vous trouverez ci-dessous le document HTML que nous avons créé. A l’intérieur, nous avons une balise body contenant un seul élément div ayant un id de container. Dans la balise head, nous avons fourni des styles de base à notre élément div comme la largeur, la hauteur, la bordure, le rembourrage, 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>
Production:
Si vous exécutez le document HTML ci-dessus, vous verrez un rectangle comme celui-ci sur la fenêtre de votre navigateur.
Maintenant que nous avons tout configuré, appliquons diverses propriétés sur cet élément div container pour obtenir sa hauteur. Le code que nous allons écrire ira à l’intérieur des balises <script></script> présentes à l’intérieur de la balise body.
Différentes façons d’obtenir la hauteur des éléments div en JavaScript
Tout d’abord, nous allons récupérer la référence de l’élément container depuis le DOM HTML en utilisant la méthode getElementById(). Ensuite, nous allons stocker cet élément dans la variable element en JavaScript.
let element = document.getElementById('container');
Maintenant que nous avons l’élément div, obtenons la hauteur du div en utilisant diverses propriétés en utilisant JavaScript.
1. clientHeight
Le clientHeight renvoie la hauteur d’un élément incluant le remplissage sous forme de valeur entière.
console.log(element.clientHeight);
Production:
58
Puisque nous avons ajouté un rembourrage de 4px sur les quatre côtés du conteneur lors du calcul de la hauteur, qui est actuellement de 50px, le rembourrage de 4px en haut et 4px en bas, c’est-à-dire un rembourrage total de 8px sera être ajouté à la hauteur. Cela se traduira par une hauteur totale de 58px.
2. offsetHeight
Le offsetHeight se compose de la hauteur de l’élément qui inclut également le remplissage, les bordures et la barre de défilement horizontale (le cas échéant).
console.log(element.offsetHeight);
Production:
60
Semblable à la propriété clientHeight, la propriété offsetHeight prendra également un rembourrage 8px, la hauteur du contenu qui est de 50px et également la largeur de bordure qui est 1px en haut et 1px en bas qui est au total de 2px . La hauteur totale renvoyée par cette propriété sera donc 8 + 50 + 2 soit 60px.
3. hauteur de défilement
Le scrollHeight renvoie la hauteur du contenu, y compris le contenu qui n’est pas visible à l’écran en raison d’un débordement. Il n’inclut que le remplissage de l’élément, mais pas la bordure, la marge ou la barre de défilement horizontale.
La scrollHeight est similaire à la clientHeight. La seule différence entre clientHeight et scrollHeight est que la scrollheight peut également inclure la hauteur du contenu, qui n’est actuellement pas visible à l’écran en raison d’un débordement.
console.log(element.scrollHeight);
Production:
58
La hauteur du contenu est de 50px et le remplissage total est de 8px. Par conséquent, la hauteur totale renvoyée par la propriété scrollHeight est 58px.
4. getBoundingClientRect()
La méthode getBoundingClientRect() renvoie un objet qui contient des informations relatives à la largeur et à la hauteur de l’élément ainsi que sa position (x, y, haut, gauche, etc.) par rapport à la fenêtre. La hauteur calculée par cette méthode contient également un remplissage et des bordures.
console.log(element.getBoundingClientRect().height);
Production:
60
Ainsi, pour obtenir la hauteur de l’élément à partir de l’objet renvoyé par la méthode getBoundingClientRect(), nous devons utiliser la touche height pour obtenir la hauteur. Ici, la hauteur de l’élément est 50px, le rembourrage est 8px et la largeur de la bordure est 2px. Ainsi, une hauteur totale de 60px sera retournée par cette fonction.
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