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();
Web API JavaScript 1.2 г. Просмотров: 653
Оценить код:

Комментарии

Ваш комментарий будет первым.
Войдите, чтобы оставить комментарий.