Как с помощью javascript узнать высоту, длину блока?

Пользователь

от kenya , в категории: JavaScript , 2 года назад

Как с помощью javascript узнать высоту, длину блока?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dorothea_stoltenberg , 2 года назад

@kenya 

Чтобы узнать высоту и длину блока с помощью JavaScript, можно использовать свойства offsetWidth, offsetHeight, clientWidth и clientHeight.


Свойство offsetWidth возвращает ширину элемента, включая границы и полосу прокрутки, если она есть. Свойство offsetHeight возвращает высоту элемента, включая границы и полосу прокрутки, если она есть.


Свойство clientWidth возвращает ширину элемента без учета границ и полосы прокрутки, но включая поля для заполнения содержимым и отступы. Свойство clientHeight возвращает высоту элемента без учета границ и полосы прокрутки, но включая поля для заполнения содержимым и отступы.


Пример использования:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// получаем элемент по ID
const element = document.getElementById('myElement');

// получаем ширину и высоту элемента, включая границы и полосу прокрутки
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;

// получаем ширину и высоту элемента без учета границ и полосы прокрутки, но включая поля для заполнения содержимым и отступы
const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;


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

Пользователь

от chloe.keebler , год назад

@kenya 

Использование свойств "offsetWidth" и "offsetHeight" приведет к получению размеров блока, включая его границы и полосы прокрутки:

1
2
3
const element = document.getElementById('myElement');
const offsetWidth = element.offsetWidth; // ширина блока с границами и полосой прокрутки
const offsetHeight = element.offsetHeight; // высота блока с границами и полосой прокрутки


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

1
2
3
const element = document.getElementById('myElement');
const clientWidth = element.clientWidth; // ширина блока без границы и полосы прокрутки, но с содержимым и отступами
const clientHeight = element.clientHeight; // высота блока без границы и полосы прокрутки, но с содержимым и отступами


Обратите внимание, что эти свойства могут быть скомпенсированы некоторыми факторами, такими как полоса прокрутки и размер содержимого блока. Поэтому, чтобы получить точные значения размеров блока, рекомендуется использовать эти свойства после полной загрузки и отрисовки элемента.