Les différences entre scrollHeight, clientHeight et offsetHeight dans différents navigateurs

document.body est le nœud de corps dans l'objet Document dans le DOM, et document.documentElement est une référence au nœud racine (html) de l'objet document.

Le contenu suivant a été testé sous , tous sont des résultats de tests personnels~

Les versions du navigateur sont : IE11, Firefox 53.0.3 (64 bits), chrome 58.0 . 3029.110 (64 bits)

Code pièce js du programme de test :

#one{border : 10px solid black; padding:5px; margin:10px;}; /*Ce test est basé sur le style de balise body du code de gauche, l'un est l'identifiant de la balise body*/ </style&gt ;

1.Comparaison entre document.documentElement.scrollHeight et document.body.scrollHeight

Sous navigateur IE :

h1=document.documentElement.scrollHeight ; //La hauteur réelle du contenu sous la balise html, y compris la bordure, la marge et le remplissage de la balise body

h2=document.body.scrollHeight; La hauteur réelle du style sous la balise body, y compris le remplissage, n'inclut pas la bordure et la marge de la balise body

Résultat du calcul : h1=h2+bordure supérieure et inférieure (bordure du corps) + supérieur ; et marge inférieure (marge intérieure du corps) ;

Sous le navigateur Firefox :

h1=document.documentElement.scrollHeight //La hauteur réelle du contenu sous la balise html, y compris la bordure ; , marge et remplissage de la balise body;

h2=document.body.scrollHeight; //body La hauteur réelle du style, y compris le remplissage sous la balise, à l'exclusion de la bordure et de la marge de la balise body

Résultat du calcul : h1=h2+bordure supérieure et inférieure (bordure du corps) + marge supérieure et inférieure (marge intérieure du corps

// La méthode de calcul est la même dans les deux cas) ; Navigateur Firefox et navigateur IE. La méthode de calcul dans le navigateur Chrome est légèrement différente

Sous le navigateur Chrome :

h1=document.documentElement.scrollHeight; sous la balise html, y compris la bordure, la marge et le remplissage de la balise body

h2=document.body.scrollHeight; 🎜> Résultat du calcul : h1=h2;

2. d ocument.documentElement.clientHeight et document .body.clientHeight comparaison Sous navigateur IE :

h3=document.documentElement.clientHeight; //La hauteur de la partie visible du contenu web change avec la fenêtre du navigateur

h4=document.body.clientHeight; //La hauteur réelle du contenu sous la balise body, y compris le remplissage de la balise body, à l'exclusion de la bordure et de la marge de la balise body

Sous le navigateur Firefox :

h3= document.documentElement.clientHeight; //La hauteur de la partie visible du contenu Web change à mesure que la taille de la fenêtre du navigateur change

h4=document.body.clientHeight; le contenu sous la balise body, y compris le remplissage de la balise body, à l'exclusion de la bordure et de la marge de la balise body

// La méthode de calcul est la même dans les deux ; Navigateur Firefox et navigateur IE. La méthode de calcul dans le navigateur Chrome est légèrement différente Sous le navigateur Chrome :

h3=documentElement.clientHeight; du contenu de la page Web change avec la taille de la fenêtre du navigateur

h4=document.body.clientHeight; //La hauteur réelle du contenu sous la balise body, y compris la balise body Le remplissage n'inclut pas le bordure et marge de la balise body

3. Comparaison entre offsetHeight et document.body.offsetHeight Sous le navigateur IE : h5=document.documentElement.offsetHeight; //under html tag La hauteur réelle du contenu, y compris la bordure, la marge et le remplissage de la balise body

h6=document.body.offsetHeight; //La hauteur réelle du contenu sous la balise body, y compris la bordure, le remplissage de la balise body, hors marge

Résultat du calcul : h5=h6 +margin (balise body);

Navigateur Firefox :

h5= document.documentElement.offsetHeight ; //balise html La hauteur réelle du contenu ci-dessous, y compris la bordure, la marge et le remplissage. de la balise body;

h6=document.body.offsetHeight; );

// La méthode de calcul est la même dans le navigateur Firefox et dans le navigateur IE, et la méthode de calcul du navigateur Chrome est légèrement différente Navigateur Chrome Bas :

h5=document.documentElement.offsetHeight; //La hauteur réelle du contenu sous la balise html, y compris la bordure, la marge et le remplissage de la balise body ;

h6=document.body.offsetHeight; //La hauteur réelle du contenu sous la balise body, y compris la bordure et le remplissage de la balise body, à l'exclusion de la marge ;

Résultat du calcul : h5=h6+margin (de la balise body);

Les trois navigateurs ci-dessus,

Lorsque la marge de la balise body est 0, h5=h6;