Событие при изменении размеров блочного элемента

Иногда нужно отслеживать поведение блочного элемента и при изменении его размеров запускать дополнительный код. Актуально при адаптивной вёрстке или подгрузке контента через AJAX, когда размеры блочного элемента заранее не известны. Например у меня адаптивная вёрстка, нужно чтобы при уменьшении ширины окна некоторые пункты основного горизонтального меню перемещались в дополнительное вертикальное меню, которое открывается при наведении мышкой. В моём случае учитываются border, padding, scrollbar и content блочного элемента, но вы можете изменить код исходя из ваших задач.

P.S. Все браузеры, кроме IE 9 включительно.

<html>
<head>
  <meta charset="UTF-8">
</head>
<body onload="javascript:res(0,0,0,0)">

<script type="text/javascript">
function res(width, height, timeout, validation) {
  var item = document.getElementById('test_two');
	
  if((width == item.offsetWidth) && (height == item.offsetHeight)) {
	
    if(validation) {
      // Сработает при изменении размеров блочного элементов, для тестирования можно раскомментировать нижнюю строку.
      // document.getElementById('test').innerHTML = Date();
    } else {
      timeout = 500;
    }		
    window.setTimeout(res, timeout, width, height, timeout, 0);
		
  } else {
    width = item.offsetWidth;
    height = item.offsetHeight;
    timeout = 200;
    window.setTimeout(res, timeout, width, height, timeout, 1);
  }
	
}
</script>

  <div id="test"></div>
  <div id="test_two"><p>Test JavaScript.</p></div>
	
</body>
</html>

Событие при изменении размеров блочного элемента — resize

Articles