[ Web Proxy ]
URL:
Viewing: https://javascript.info/task/width-vs-clientwidth [Back]  [Original]

The difference: CSS width versus clientWidth
EN

We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

    Search on Javascript.info:
    Search in the tutorial:
    Light themeDark theme
    DanskEnglishEspaolFranaisIndonesiaItalianoTrkeOzbek
    back to the lesson

    The difference: CSS width versus clientWidth

    importance: 5

    Whats the difference between getComputedStyle(elem).width and elem.clientWidth?

    Give at least 3 differences. The more the better.

    solution

    Differences:

    1. clientWidth is numeric, while getComputedStyle(elem).width returns a string with px at the end.
    2. getComputedStyle may return non-numeric width like "auto" for an inline element.
    3. clientWidth is the inner content area of the element plus paddings, while CSS width (with standard box-sizing) is the inner content area without paddings.
    4. If theres a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause its not available for content any more), and some do not. The clientWidth property is always the same: scrollbar size is substracted if reserved.

    Web Proxy Viewer  |  New URL  |  Original Page