Les différences entre scrollHeight, clientHeight et offsetHeight dans différents navigateurs-js tutoriel-php.cn

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;