Свойства clientWidth и clientHeight в JavaScript

Java | Amber | Комментировать запись

Используя свойства clientWidth и clientHeight, вы можете получить размер HTML-элемента в пикселях. Размеры рассчитываются с использованием размеров контента внутри HTML-элемента вместе с отступами.

Примечание: Границы, поля или полосы прокрутки (если они есть) при вычислении clientWidth и clientHeight исключаются.

Использование clientWidth и clientHeight

Давайте взглянем на следующий пример использования этих свойств на практике: 

***

<div id="foo">
  Hello World
</div>

***

const clientWidth = document.querySelector('#foo').clientWidth;
const clientHeight = document.querySelector('#foo').clientHeight;

Примеры

В качестве упражнения попробуйте вычислить значение clientWidth и clientHeight следующего элемента HTML:

/**********************************************
 **  If the HTML element is <div id="foo"/>  **
 **********************************************/
const clientWidth = document.querySelector('div#foo').clientWidth;
const clientHeight = document.querySelector('div#foo').clientHeight;
console.log(clientWidth, clientHeight);
// --> 200, 100

Как вычисляется данное значение? Свойства сложили отступы с контентом внутри элемента HTML и проигнорировали поля и границы:

(10 + 50) + 140   // clientWidth === 200
(30) + 70         // clientHeight === 100

Давайте попробуем выполнить другой пример. Попробуйте вычислить clientWidth и clientHeight этого HTML-элемента:

(10 + 10) + 230   // clientWidth === 250
(30 + 20) + 70    // clientHeight === 120

Примечания 

• clientWidth и clientHeight не работают со встроенными элементами HTML (такими как span, em или a). Они просто вернут 0.
• Данные свойства округляют значения до ближайшего целого числа. Если вам нужны более точные значения, используйте getBoundingClientRect()
• Вы не можете присвоить новое значение, чтобы изменить размеры HTML-элемента. Например, это выражение ничего не сделает: someElement.clientWidth = 30

clientWidth и clientHeight поддерживаются всеми основными настольными и мобильными браузерами.

За подробной информацией о clientWidth и clientHeight обратитесь к их спецификациям.

Читайте также: Object.values и Object.entries в JavaScript