différence entre offsetHeight et clientHeight

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

Source

2010-11-05 steve

Voici un bon exemple de démonstration http: // jsfiddle.net/shibualexis/yVhgM/3/ – GibboK

137

clientHeight:

Renvoie la hauteur de la zone visible d'un objet, en pixels. La valeur contient la hauteur avec le remplissage, mais 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 remplissage, scrollBar et la bordure, mais n'inclut pas la marge.

Donc, offsetHeight inclut la barre de défilement et la bordure, ce qui n'est pas le cas pour clientHeight.

Source

2010-11-05 14:05:14 Oded

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

@ disc0dancer - Probablement parce que le client a déjà 'clientSize' disponible (après tout, c'est la viewport), mais a besoin de calculer' offsetHeight' après avoir refondu le document entier? – Oded

Eh bien, l'inspecteur Webkit dit que les remboursements sont également sur le document entier, même en demandant clientHeigh. – disc0dancer

La réponse de Oded est la théorie. Mais la théorie et la réalité ne sont pas toujours les mêmes, du moins 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 vertical on pourrait penser que ce soit l'<CORPS> ou le < élément HTML > a une ScrollHeight geater que OffsetHeight comme le montre cette image. Cela est vrai pour toutes les versions antérieures 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 incorrect, ClientHeight est toujours correct.

Essayez le code suivant sur les 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>

Bien plus Internet Explorer montre correctement:

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

La sortie de Firefox et Internet Explorer 11 est:

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

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

S'il vous plaît noter que ClientHeight et offsetHeight peuvent également différer extrêmement pour les éléments qui ne sont pas visibles, comme par exemple un <FORMULAIRE> où offsetHeight peut être la taille réelle du formulaire en ClientHeight peut être nul.

Source

2015-07-15 20:03:30 Elmue

différence entre offsetHeight et clientHeight

Répondre

Questions connexes