Quelle est la différence entre « offsetWidth », « clientWidth » et « scrollWidth » (et leurs homologues en hauteur) ?

Comprendre offsetWidth, clientWidth, scrollWidth et leurs homologues en hauteur

Malgré de nombreuses demandes de renseignements sur StackOverflow et des informations confuses ou inexactes en ligne, comprendre les subtilités de offsetWidth, clientWidth, scrollWidth et leurs homologues en hauteur restent un défi.

Définitions et aides visuelles :

• offsetWidth, offsetHeight : Représentent la largeur et la hauteur de la boîte visuelle de l'élément, y compris frontières. Peut être calculé en additionnant la largeur/hauteur, les remplissages et les bordures (pour les éléments avec display: block).
• clientWidth, clientHeight : Indiquez la partie visible du contenu dans l'élément, à l'exclusion bordures et barres de défilement, mais incluant le remplissage. Ne peut pas être directement dérivé du CSS et varie en fonction de la taille de la barre de défilement du système.
• scrollWidth, scrollHeight : Indiquez la taille totale du contenu de l'élément, y compris les parties cachées en dehors de la zone de défilement. Dépend également du contenu et ne peut pas être calculé directement à partir de CSS.

[Visuel du modèle de boîte CSS2 avec dimensions étiquetées]

Calcul de la largeur de la barre de défilement :

Puisque offsetWidth inclut la largeur de la barre de défilement, nous pouvons la calculer en utilisant le formule :

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Cependant, cette méthode peut générer des erreurs d'arrondi en raison de la nature entière de offsetWidth et clientWidth, qui peuvent ne pas refléter les dimensions fractionnaires réelles à des niveaux de zoom autres que 1.

Considérations supplémentaires :

Notez que les éléments suivants formula :

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

ne fournit pas de résultats fiables dans Chrome, car Chrome soustrait la largeur de la barre de défilement de la largeur indiquée. De plus, Chrome affiche paddingBottom au bas du contenu de défilement, contrairement aux autres navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!