différence entre offsetHeight et clientHeight

154

Dans le domaine javascript - quelle est la différence entre offsetHeight et clientHeight d'un élément?

javascript

— Steve
source

Voici un bon exemple de démo jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Réponses:

203

clientHeight :

Renvoie la hauteur de la zone visible d'un objet, en pixels. La valeur contient la hauteur avec le remplissage, mais elle n'inclut pas le scrollBar, la bordure et la marge.

offsetHeight :

Renvoie la hauteur de la zone visible d'un objet, en pixels. La valeur contient la hauteur avec le padding, scrollBar et la bordure, mais n'inclut pas la marge.

Donc, offsetHeightinclut la barre de défilement et la bordure, clientHeightnon.

— Oded
source

Une autre chose que j'ai remarquée est que clientHeight est beaucoup plus rapide que offsetHeight. Avez-vous une idée pourquoi?

— disc0dancer

@ disc0dancer - Probablement parce que le navigateur a déjà le clientSizefacilement disponible (après tout, c'est la fenêtre), mais doit calculer offsetHeightaprès avoir redistribué tout le document?

— Oded

Eh bien, l'inspecteur Webkit dit que les reflows sont également sur l'ensemble du document, même lorsque vous demandez clientHeigh.

— disc0dancer

@ disc0dancer - Voilà à mon avis. Mais c'est une question de mise en œuvre - pas sûr que tous les navigateurs soient comme ça.

— Oded

La réponse d'Oded est la théorie. Mais la théorie et la réalité ne sont pas toujours les mêmes, du moins pas pour les éléments <BODY> ou <HTML> qui peuvent être importants pour les opérations de défilement en javascript.

Microsoft a une belle image dans le MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Si vous avez une page HTML qui montre une barre de défilement verticale, on peut s'attendre à ce que l'élément <BODY> ou <HTML> ait un ScrollHeight plus grand que OffsetHeight comme le montre cette image. Cela est vrai pour toutes les anciennes versions d'Internet Explorer.

Mais ce n'est pas vrai pour Internet Explorer 11 et pas pour Firefox 36. Au moins dans ces navigateurs OffsetHeight est presque le même que ScrollHeight qui est faux.

Et même si OffsetHeight peut être erroné, ClientHeight est toujours correct.

Essayez le code suivant sur différents navigateurs et vous verrez:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

Alors que l'ancien Internet Explorer s'affiche correctement:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

Le résultat de Firefox et Internet Explorer 11 est:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

ce qui montre clairement que offsetHeight est faux ici. OffsetHeight et ClientHeight ne doivent différer que de quelques pixels ou être identiques.

Veuillez noter que ClientHeight et OffsetHeight peuvent également différer extrêmement pour les éléments qui ne sont pas visibles comme par exemple un <FORM> où OffsetHeight peut être la taille réelle du FORM tandis que ClientHeight peut être égal à zéro.

— Elmue
source