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

Comprendre offsetWidth, clientWidth, scrollWidth et -Height

Comprendre les différences entre offsetWidth, clientWidth, scrollWidth et leurs homologues en hauteur peut être difficile. Cet article vise à fournir une explication complète de ces propriétés, complétée par des astuces visuelles, et à démontrer comment elles peuvent être utilisées pour calculer la largeur des barres de défilement.

Modèle de boîte CSS et propriétés DOM

Le CSS Le modèle de boîte, qui définit les dimensions d'un élément sur une page Web, peut être complexe, notamment lorsqu'il s'agit de contenu défilant. Pour simplifier le processus de détermination des dimensions d'un élément à l'aide de JavaScript, chaque élément possède six propriétés DOM :

• offsetWidth, offsetHeight : Inclut toutes les bordures et la largeur/hauteur de l'élément.
• clientWidth, clientHeight : Représente la partie visible de la boîte contenu, à l'exclusion des bordures et des barres de défilement mais incluant le remplissage.
• scrollWidth, scrollHeight : Désigne la taille du contenu entier de la boîte, y compris les parties cachées en dehors de la zone de défilement.

Représentation visuelle

[Image de la boîte CSS2 Model]

Calcul de la largeur de la barre de défilement

La propriété offsetWidth, qui intègre la largeur de la barre de défilement, peut être utilisée pour déterminer la largeur de la barre de défilement à l'aide de la formule suivante :

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

Cependant, des erreurs d'arrondi peuvent survenir car offsetWidth et clientWidth sont toujours des nombres entiers, alors que les tailles réelles peuvent être fractionnaires. valeurs.

Calcul alternatif de la largeur de la barre de défilement (Chrome)

Dans Chrome, la largeur de la barre de défilement peut être calculée à l'aide de la formule suivante :

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

Cependant, cette formule peut ne pas fonctionner de manière fiable dans d'autres navigateurs en raison des différences dans la façon dont les barres de remplissage et de défilement sont rendues.

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!