Вернуться к уроку

В чём отличие "width" и "clientWidth" ?

важность: 5

В чём отличия между getComputedStyle(elem).width и elem.clientWidth?

Укажите хотя бы три отличия, лучше – больше.

Отличия:

  1. getComputedStyle не работает в IE8-.

  2. clientWidth возвращает число, а getComputedStyle(...).width – строку, на конце px.

  3. getComputedStyle не всегда даст ширину, он может вернуть, к примеру, "auto" для инлайнового элемента.

  4. clientWidth соответствует внутренней видимой области элемента, *включая padding, а CSS-ширина width при стандартном значении box-sizing соответствует зоне внутри padding.

  5. Если есть полоса прокрутки, то некоторые браузеры включают её ширину в width, а некоторые – нет.

    Свойство clientWidth, с другой стороны, полностью кросс-браузерно. Оно всегда обозначает размер за вычетом прокрутки, т.е. реально доступный для содержимого.