Определение размеров элементов

Существует несколько свойств, которые можно использовать для определения ширины и высоты элементов, и бывает сложно определить, какое из них подходит для ваших нужд. Эта статья поможет вам сделать этот выбор. Обратите внимание, что все эти свойства являются только для чтения. Если вы хотите установить ширину и высоту элемента, используйте width и height или переопределяющие min-width и max-width, а также min-height и max-height свойства.

Если вам нужно узнать общее количество занимаемого места элементом, включая ширину видимого содержимого, полосы прокрутки (если они есть), отступы и рамку, используйте свойства HTMLElement.offsetWidth и HTMLElement.offsetHeight. В большинстве случаев они совпадают со значениями ширины и высоты Element.getBoundingClientRect(), если к элементу не применены преобразования. В случае преобразований offsetWidth и offsetHeight возвращают ширину и высоту макета элемента, в то время как getBoundingClientRect() возвращает ширину и высоту отрисовки. Например, если у элемента есть width: 100px; и transform: scale(0.5);, то getBoundingClientRect() вернет 50 в качестве ширины, а offsetWidth вернет 100. Другое отличие заключается в том, что offsetWidth и offsetHeight округляют значения до целых чисел, в то время как getBoundingClientRect() предоставляет более точные значения с десятичными знаками.

Если вам нужно узнать, сколько места занимает фактическое отображаемое содержимое, включая отступы, но не включая границы, отступы или полосы прокрутки, используйте свойства Element.clientWidth и Element.clientHeight:

Если вам нужно узнать фактический размер содержимого, независимо от того, какая его часть в данный момент отображается, используйте свойства Element.scrollWidth и Element.scrollHeight. Они возвращают ширину и высоту всего содержимого элемента, даже если только часть содержимого видна из-за полос прокрутки.

Например, если элемент размером 600x400 пикселей отображается внутри контейнера прокрутки размером 300x300 пикселей, scrollWidth вернёт 600, а scrollHeight вернёт 400.

• https://www.w3.org/TR/cssom-view-1/
• MSDN: Измерение размеров и расположения элементов