Web API: Отслеживать изменения размера элементов DOM с помощью Resize Observer API

Resize Observer API — браузерный API, который позволяет отслеживать изменения размера элементов DOM.

// Создание экземпляра Resize Observer и указание функции обратного вызова
let resizeObserver = new ResizeObserver( entries => 
{
	for( let entry of entries )
	{
		// Выводим элемент и его новые размеры
		console.log('Элемент:', entry.target);
		console.log('Размеры элемента:', entry.contentRect);
	}
});

// Начало наблюдения за элементом с id xxx
// При изменении размера элемента xxx будет вызываться указанная функция обратного вызова, 
// выводящая в консоль информацию об элементе и его новых размерах
let element = document.querySelector( '#xxx' );
resizeObserver.observe( element );

// Для прекращения наблюдения используется метод unobserve
// resizeObserver.unobserve( element );

// Для прекращения наблюдения за всеми элементами используется метод disconnect
// resizeObserver.disconnect();
3.3 г. Просмотров: 1.2k
Материал помог? Оценка помогает находить устаревшие и спорные решения.

Комментарии

0

Нашли ошибку или хотите дополнить материал?

Комментариев пока нет.Можно первым дополнить материал или сообщить об ошибке.
Telegram