What is the difference between offsetWidth and clientWidth?
clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars) offsetWidth is the outer width (ie. the space occupied by the element, including padding and borders)
Table of Contents
What is offsetWidth jQuery?
In jQuery, offsetWidth is defined as a property for displaying the width of the viewable for selected element to display the width in pixel format, which not only includes width property but also includes other properties like border, padding, scrolling, etc.

What is clientWidth?
The Element. clientWidth property is zero for inline elements and elements with no CSS; otherwise, it’s the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).
What is offsetWidth JavaScript?
The offsetWidth property returns the viewable width of an element (in pixels) including padding, border and scrollbar, but not the margin.

What is offsetWidth Javascript?
What is JavaScript clientWidth?
The clientWidth property returns the viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
How use JavaScript clientWidth?
clientWidth property is used to find the inner width of an element. If the element doesnt contain any CSS or inline layout boxes, it returns zero. This property calculates the width as, CSS width + CSS padding – height of vertical scroll bar.
Does clientWidth include padding?
clientWidth: It returns the width of an HTML element including padding in pixels but does not include margin, border and scrollbar width.
How do I get scrollTop value?
To get or set the scroll position of an element, you follow these steps:
- First, select the element using the selecting methods such as querySelector() .
- Second, access the scroll position of the element via the scrollLeft and scrollTop properties.