Verständnis von offsetWidth, clientWidth, scrollWidth und -Height entsprechend

Question

Es gibt mehrere Fragen auf StackOverflow bezüglich offsetWidth / clientWidth / scrollWidth (und -Height entsprechend), aber keine gibt eine umfassende Erklärung darüber, was diese Werte sind.

Außerdem gibt es mehrere Quellen im Web, die verwirrende oder falsche Informationen liefern.

Kannst du eine umfassende Erklärung einschließlich einiger visueller Hinweise geben? Wie können diese Werte verwendet werden, um die Breite der Bildlaufleisten zu berechnen?

Answer 1

Client-Breite/-Höhe und Offset-Breite/-Höhe Berechnung - eine kurze Zusammenfassung unter Verwendung eines Beispiels CSS-Stils:

Referenz: https://javascript.info/size-and-scroll