Comparaison des différences entre les différentes hauteurs et sommets dans les connaissances js_Basic

Chaque fois que je vois clientHeight(clientTop), offsetHeight(offsetTop), scrollHeight(scrollTop) dans js, je suis confus et je ne peux pas faire la différence entre eux. Cependant, cela ne vaut pas la peine de les rencontrer une ou deux fois. il faut regarder les différences à chaque fois pour décider lequel utiliser.

Cet article est principalement basé sur Chrome. Il peut y avoir quelques différences entre les différents navigateurs, mais beaucoup d'entre elles n'ont pas été rencontrées par moi et ne sont pas très claires. Je les enregistrerai lorsque je rencontrerai des problèmes de compatibilité similaires à l'avenir. Ici, cette fois, j'enregistrerai les différences entre les différentes propriétés du navigateur Chrome pour faciliter la visualisation future

La différence entre clientHeight, offsetHeight et scrollHeight

ClientHeight est fondamentalement le même dans différents navigateurs. Il est convenu qu'il s'agit de la hauteur de la zone visible du contenu, ce qui signifie la hauteur de la zone où le contenu peut être vu dans le navigateur de page, à l'exclusion des barres de défilement et des marges. Mais y compris le remplissage, c'est-à-dire la valeur réelle clientHeight = la valeur de remplissage de la hauteur de la zone visible de l'objet actuel, comme le montre la figure ci-dessous. clientHeight = la hauteur de la zone visible de l'objet (300) la partie supérieure. et valeurs de remplissage inférieures​​(20) = 320

Solutions Javascript pratiques dans différents navigateurs :

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = hauteur de la barre de défilement de l'objet actuel, valeur de remplissage de la valeur. La hauteur de l'objet actuel dans l'image ci-dessus est la même que la hauteur de la zone visuelle, donc offsetHeight = 300 padding(20px) border(10px) = 330

ScrollHeight est la hauteur réelle du contenu de la page Web. La valeur minimale est clientHeight, ce qui signifie qu'elle peut être égale à clientHeight. Mais supposons une telle situation, comme le montre le code suivant, la hauteur du div parent. est de 300 px et la hauteur du div enfant est de 500 px. À ce moment, une barre de défilement sera formée. À ce stade, le diagramme de structure du div parent est le suivant :

La scrollHeight du div parent doit être scrollHeight = 500px padding value

Parce que la barre de défilement est générée à ce moment-là, la hauteur de la zone visible du div parent est de 283, et la hauteur actuelle de l'objet est la hauteur du div parent est de 300, donc

clientHeight = 283px valeur de remplissage (20px) = 303px

offsetHeight = hauteur du div parent (300px) valeur de remplissage (20px) bordure (10px) = 330px

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

La différence entre clientTop, offsetTop et scrollTop

Pour comprendre clientTop, vous pouvez vous référer à clientHeight. La méthode de calcul de clientHeight est la hauteur de la zone visuelle actuelle plus la valeur de remplissage. Ensuite, clientTop peut être compris comme la distance entre la zone visuelle actuelle et l'élément précédent.

Comme le montre l'image ci-dessus, clientTop est de 5 pixels. Dans la plupart des cas, clientTop est cette valeur de bordure.

offsetTop est la distance entre l'objet actuel et l'élément body. Sa méthode de calcul est relativement compliquée. Comprenons-le d'abord à partir de la figure ci-dessus. L'objet actuel fait référence à la zone à l'intérieur de la bordure, donc le calcul de offsetTop commence à partir de la marge. de l'objet courant. La formule de calcul est la suivante : offsetTop = margin-top de l'objet courant, margin-top de tous les éléments supérieurs de l'objet courant, border-top de tous les éléments supérieurs de l'objet courant. que offsetTop ne peut pas être attribué directement et ne peut être obtenu que par cette méthode de calcul.

scrollTop est la distance entre le haut de l'objet actuel et le bord supérieur de l'objet actuel dans la plage d'affichage de la fenêtre actuelle. Autrement dit, lorsqu'une barre de défilement verticale apparaît, la distance à laquelle la barre de défilement est tirée.

Ce qui précède est une comparaison des différences entre les différentes hauteurs et sommets en js. J'espère que cela sera utile à l'apprentissage de chacun.