In web development, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, and scrollHeight are properties of the DOM element that can be used to determine the dimensions of an element.
offsetWidth: The offsetWidth property returns the total width of an element, including padding, borders, and scrollbars (if present).
offsetHeight: The offsetHeight property returns the total height of an element, including padding, borders, and scrollbars (if present).
clientWidth: The clientWidth property returns the width of an element's content area, including padding, but excluding borders and scrollbars.
clientHeight: The clientHeight property returns the height of an element's content area, including padding, but excluding borders and scrollbars.
scrollWidth: The scrollWidth property returns the total width of an element, including padding and borders, but excluding scrollbars. It returns the total width of the element, even if the element's content overflows and a scrollbar is present.
scrollHeight: The scrollHeight property returns the total height of an element, including padding and borders, but excluding scrollbars. It returns the total height of the element, even if the element's content overflows and a scrollbar is present.
Here's Live demo
See the Pen offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth and scrollHeight by Mudasir Abbas Turi (@ussturi) on CodePen.