offsetWidth/offsetHeight – “outer” width/height of an element including borders.offsetLeft/offsetTop – coordinates relative to the upper-left edge of offsetParent.offsetParent – is the nearest positioned ancestor or td, th, table, body.SummaryĮlements have the following geometry properties: Please note that the described difference is only about reading getComputedStyle(.).width from JavaScript, visually everything is correct. That’s because Firefox returns the CSS width and other browsers return the “real” width.

But Firefox shows 300px, while Chrome and Edge show less. On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. The element with text has CSS width:300px.

If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below. Such cross-browser differences is the reason not to use getComputedStyle, but rather rely on geometry properties. Firefox) – CSS width (ignore the scrollbar). Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. …But with getComputedStyle(elem).width the situation is different. And clientWidth/clientHeight take that into account. So the real width available for the content is less than CSS width. Sometimes the code that works fine without a scrollbar becomes buggy with it, because a scrollbar takes the space from the content in some browsers. So here CSS width is useless.Īnd there’s one more reason: a scrollbar. Alert( getComputedStyle(elem).width ) // autoįrom the CSS standpoint, width:auto is perfectly normal, but in JavaScript we need an exact size in px that we can use in calculations.

Resize image on scroll