The difference: CSS width versus clientWidth
önem: 5
What’s the difference between getComputedStyle(elem).width
and elem.clientWidth
?
Give at least 3 differences. The more the better.
Differences:
clientWidth
is numeric, whilegetComputedStyle(elem).width
returns a string withpx
at the end.getComputedStyle
may return non-numeric width like"auto"
for an inline element.clientWidth
is the inner content area of the element plus paddings, while CSS width (with standardbox-sizing
) is the inner content area without paddings.- If there’s a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it’s not available for content any more), and some do not. The
clientWidth
property is always the same: scrollbar size is substracted if reserved.