Difference Between Style.width And Offsetwidth In HTML?

I notice that offsetwidth is a slightly bigger number. Similarly for style.height and offsetheight.

Solution 1:

offsetWidth returns computed element's width, while el.style.width just returns width property defined in element.style by javascript and does not reflect real element's dimensions.

This means that if you will try to get a width of the element by accessing el.style, you will probably get nothing (sample), even if the width was defined in your CSS. You will get the number only if it was defined in el.style by javascript.

Furthermore, offsetWidth gives you real width of your element, including padding and border if you use content-box css box model which is default value for box-sizing. So you can think about that like you set width of the contents of the element and padding/border go on top of that (sample).

If you are using border-box css box model, you set the total width of the element, including padding and border make the content area smaller (sample). So, in this case, offsetWidth and el.style.width would return exactly the same numbers (if el.style.width was previously set by javascript).

Solution 2:

Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

Source: https://developer.mozilla.org/en/DOM/element.offsetWidth

---

So, it's the width of your element with border and padding included. Same thing for height.

Solution 3:

offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars.

clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)

with only return the css with defined