Testez la différence entre ces trois propriétés à travers une démo.
illustrer:
ScrollWidth: La largeur du contenu réel de l'objet, la largeur de la ligne sans bords, deviendra plus grande car le contenu de l'objet dépasse la zone de visualisation.
ClientWidth: La largeur de la zone de visualisation du contenu de l'objet, sans envelopper les lignes équilatérales de la barre de défilement, changera à mesure que la taille de l'affichage de l'objet change.
OffsetWidth: La largeur réelle de l'objet dans son ensemble, la barre de défilement est également bordé, ce qui changera car l'objet affiche la taille.
La démonstration met un élément TextArea dans la page et l'affiche avec la largeur et la hauteur par défaut.
Situation 1:
S'il n'y a pas de contenu dans l'élément ou si le contenu ne dépasse pas la zone de visualisation, le défilement n'apparaît pas ou n'est pas disponible.
ScrollWidth = ClientWidth, les deux sont la largeur de la zone de visualisation du contenu.
OffsetWidth est la largeur réelle de l'élément.
Situation 2:
Le contenu de l'élément dépasse la zone de visualisation, la barre de défilement apparaît et est disponible.
ScrollWidth> ClientWidth.
ScrollWidth est la largeur du contenu réel.
ClientWidth est la largeur de la zone de visualisation du contenu.
OffsetWidth est la largeur réelle de l'élément.
FIN
Ce qui précède est toutes les différences entre ScrollWidth, ClientWidth et OffsetWidth. J'espère que ce sera utile à tout le monde.