Ответ 1

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

http://marcj.github.io/css-element-queries/

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

Пример:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Пожалуйста, не используйте плагин jQuery onresize, поскольку он использует цикл setTimeout() для проверки изменений.
ЭТО НЕВЕРОЯТНО МЕДЛЕННО И НЕ ТОЧНО.

Раскрытие: я напрямую связан с этой библиотекой.

Ответ 2

Новый стандарт для этого - API Resize Observer, доступный в Chrome 64.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

Ответ 3

Вы должны привязать событие resize к объекту window, а не к общему элементу html.

Затем вы можете использовать это:

$(window).resize(function() {
    ...
});

и внутри функции обратного вызова вы можете проверить новую ширину вызова div

$('.a-selector').width();

Итак, ответ на ваш вопрос нет, вы не можете привязать событие resize к div.

Ответ 4

В долгосрочной перспективе вы сможете использовать ResizeObserver.

new ResizeObserver(callback).observe(element);

К сожалению, в настоящее время он не поддерживается по умолчанию во многих браузерах.

В то же время вы можете использовать функцию, как показано ниже. Так как большинство изменений размера элемента происходит из изменения размера окна или из-за изменения чего-либо в DOM. Вы можете прослушивать изменение размера окна с помощью окна resize, и вы можете прослушивать изменения DOM с помощью MutationObserver.

Вот пример функции, которая перезвонит вам, когда размер предоставленного элемента изменится в результате любого из этих событий:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};

Ответ 5

ResizeSensor.js является частью огромной библиотеки, но я сократил ее функциональность до ЭТОГО:

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

Как это использовать:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});

Ответ 6

Я НЕ рекомендую взломать setTimeout(), так как он замедляет работу! Вместо этого вы можете использовать наблюдателей мутаций DOM для прослушивания изменения размера Div.

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Здесь скрипка
Попробуйте изменить размер div.

Вы можете дополнительно обернуть свой метод в метод debounce, чтобы повысить эффективность. debounce будет запускать ваш метод каждые x миллисекунд, а не каждую миллисекунду, когда DIV изменяется.

Ответ 7

Я нашел, что эта библиотека работает, когда решение MarcJ не выполнило:

https://github.com/sdecima/javascript-detect-element-resize

Он очень легкий и обнаруживает даже естественные изменения размера через CSS или просто загрузку/рендеринг HTML.

Пример кода (взято из ссылки):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>

Ответ 8

Лучшим решением было бы использовать так называемые Element Queries. Тем не менее, они не являются стандартными, спецификации не существует - и единственный вариант - использовать одну из доступных полипол/библиотек, если вы хотите пойти этим путем.

Идея запросов элементов состоит в том, чтобы разрешить определенному контейнеру на странице отвечать на предоставленное ему пространство. Это позволит написать компонент один раз, а затем отбросить его в любом месте страницы, в то время как он будет корректировать его содержимое до его текущего размера. Независимо от размера окна. Это первое отличие, которое мы видим между запросами элементов и запросами на медиа. Все надеются, что в какой-то момент будет создана спецификация, которая будет стандартизировать запросы элементов (или то, что достигает той же цели) и сделать их родными, чистыми, простыми и надежными. Большинство людей согласны с тем, что запросы СМИ довольно ограничены и не помогают в модульном дизайне и реальной отзывчивости.

Существует несколько полипол/библиотек, которые решают проблему по-разному (можно было бы назвать обходными решениями вместо решений):

• Запросы элементов CSS - https://github.com/marcj/css-element-queries
• BoomQueries - https://github.com/BoomTownROI/boomqueries
• eq.js - https://github.com/Snugug/eq.js
• ElementQuery - https://github.com/tysonmatanich/elementQuery
• И еще несколько, которые я не буду перечислять здесь, но вы можете искать. Я бы не смог сказать, какой из доступных в настоящее время вариантов лучше. Вам придется попробовать несколько и решить.

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

Ответ 9

Взгляните на это http://benalman.com/code/projects/jquery-resize/examples/resize/

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

Пример с js скриптом, чтобы объяснить, как заставить его работать.
Взгляните на эту скрипку http://jsfiddle.net/sgsqJ/4/

В том, что событие resize() привязано к элементам, имеющим класс "test", а также к объекту window и в resize callback объекта window $('. test'). Вызывается resize().

например.

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

Ответ 10

Только оконный объект генерирует событие "изменить размер". Единственный способ, которым я знаю сделать то, что вы хотите сделать, - запустить таймер интервала, который периодически проверяет размер.

Ответ 11

Вы можете использовать iframe или object, используя contentWindow или contentDocument при изменении размера. Без setInterval или setTimeout

Шаги:

• Задайте позицию элемента relative
• Добавить внутри прозрачного абсолютного скрытого IFRAME
• Слушайте IFRAME.contentWindow - onresize событие

Пример HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Пример выполнения

JsFiddle: https://jsfiddle.net/qq8p470d/

Подробнее:

• Clay - Он основан на element-resize-event
• element-resize-event

Ответ 12

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});

#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}

<div id = "div">DIV</div>

Ответ 13

Использование Clay.js(https://github.com/zzarcon/clay) довольно легко обнаружить изменения размера элемента:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

Ответ 14

Это сообщение в блоге помогло мне эффективно определить изменения размера элементов DOM.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Как использовать этот код...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

Упакованный код, используемый в примере...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

Примечание. AppConfig - это пространство имен/объектов, которые я использую для организации многоразовых функций. Не стесняйтесь искать и заменять имя тем, что хотите.

Ответ 15

Мой плагин jQuery позволяет событию "изменить размер" для всех элементов не только window.

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
}); 

Ответ 16

Вы можете попробовать код в следующем фрагменте, он покрывает ваши потребности, используя простой javascript. (запустите фрагмент кода и нажмите ссылку полной страницы, чтобы вызвать предупреждение о том, что размер div изменяется, если вы хотите проверить его.).

Основываясь на том, что это setInterval в 100 миллисекунд, я бы осмелился сказать, что мой компьютер не нашел в нем слишком много головок процессора. (0,1% ЦП было использовано как общее для всех открытых вкладок в Chrome в тесте времени.). Но опять же, это только для одного div, если вы хотите сделать это для большого количества элементов, тогда да, это может быть очень голодным CPU.

Вы всегда можете использовать событие click, чтобы в любом случае остановить обнюхивание div-resize.

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);

<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>

Ответ 17

Как ни удивительно, сколько лет эта проблема, это все еще проблема в большинстве браузеров.

Как уже говорили другие, Chrome 64+ теперь поставляется с Resize Obsers изначально, однако спецификация все еще находится в тонкой настройке, и Chrome в настоящее время (по состоянию на 2019-01-29) отстает от последней редакции спецификации.

Я видел несколько хороших полизаполнений ResizeObserver в дикой природе, однако, некоторые из них не соответствуют спецификации, а другие имеют некоторые проблемы с вычислениями.

Я отчаянно нуждался в таком поведении для создания некоторых адаптивных веб-компонентов, которые можно было бы использовать в любом приложении. Чтобы они работали хорошо, им нужно всегда знать свои размеры, поэтому ResizeObservers звучит идеально, и я решил создать полифилл, максимально соответствующий спецификации.

Репо: https://github.com/juggle/resize-observer

Демо: https://codesandbox.io/s/myqzvpmmy9

Ответ 18

Это довольно точная копия верхнего ответа, но вместо ссылки это просто часть кода, которая имеет значение, переводится как IMO, более читабельная и понятная. Несколько других небольших изменений включают использование cloneNode(), а не помещение html в строку js. Небольшой материал, но вы можете скопировать и вставить его как есть, и он будет работать.

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

Весь настоящий кредит принадлежит Marc J, но если вы просто ищете соответствующий код, вот он:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }

Ответ 19

jQuery(document).ready( function($) {

function resizeMapDIVs() {

// check the parent value...

var size = $('#map').parent().width();



if( $size < 640 ) {

//  ...and decrease...

} else {

//  ..or increase  as necessary

}

}

resizeMapDIVs();

$(window).resize(resizeMapDIVs);

});

Ответ 20

используя Bharat Patil ответ просто верните ложь внутри обратного вызова привязки, чтобы предотвратить максимальную ошибку стека, см. пример ниже:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});

Ответ 21

просто используйте ResizeObserver:

    var ro = new ResizeObserver( entries => {
    for (let entry of entries) { 
    const cr = entry.contentRect; 
    console.log('Element:', entry.target); 
    console.log('Element size: ${cr.width}px x ${cr.height}px'); 
    console.log('Element padding: ${cr.top}px ; ${cr.left}px'); 
    } 
}); 
// Observe one or multiple elements 
ro.observe(someElement);

https://medium.com/dev-channel/after-mutationobserver-performanceobserver-and-intersectionobserver-we-have-another-observer-for-2c541bcb531b

Ответ 22

Это действительно старый вопрос, но я решил опубликовать свое решение по этому вопросу.

Я пытался использовать ResizeSensor так как, похоже, все были в восторге. После реализации, однако, я понял, что под капотом Element Query требуется, чтобы к рассматриваемому элементу было применено relative или absolute положение, что не работает для моей ситуации.

Я закончил обработку этого с interval Rxjs вместо прямого setTimeout или requestAnimationFrame как в предыдущих реализациях.

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

В приведенном ниже примере я отслеживаю изменения внутренней (зеленой) ширины div. Его ширина установлена на 50%, но максимальная ширина составляет 200 пикселей. Перетаскивание ползунка влияет на ширину обёртки (серого) div. Вы можете видеть, что наблюдаемое срабатывает только при изменении внутренней ширины div, что происходит, только если внешняя ширина div меньше 400px.

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = '${event.target.value}px';
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();

.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h1>Resize Browser width</h1>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>

Ответ 23

Чистое решение Javascript, но работает, только если размер элемента изменяется с помощью кнопки css resize:

1. сохранить размер элемента с помощью offsetWidth и offsetHeight;
2. добавить прослушиватель события onclick для этого элемента;
3. при запуске сравните текущие offsetWidth и offsetHeight с сохраненными значениями и, если они отличаются, сделайте то, что хотите, и обновите эти значения.

Ответ 24

Вот упрощенная версия решения от @nkron, применимая к одному элементу (вместо массива элементов в ответе @nkron сложность мне не нужна).

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

Слушатель и наблюдатель события могут быть удалены:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();

Ответ 25

В спецификации существует только Window.onResize, но вы всегда можете использовать IFrame для создания нового объекта Window внутри вашего DIV.

Проверьте этот ответ. Существует новый маленький jquery plugin, который является портативным и простым в использовании. Вы всегда можете проверить исходный код, чтобы узнать, как это делается.

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}

Ответ 26

Я думал, что это невозможно сделать, но потом я подумал об этом, вы можете вручную изменить размер div с помощью стиля = "resize: both;" чтобы сделать это, вы должны щелкнуть по нему, чтобы добавить функцию onclick, чтобы проверить высоту и ширину элемента, и это сработало. Имея всего 5 строк чистого javascript (конечно, это может быть еще короче) http://codepen.io/anon/pen/eNyyVN

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>


<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>