javascript - DIV의 치수가 어떻게 변경되는지 감지하는 방법은 무엇입니까?

요소의 크기가 변경되었는지 확인하는 매우 효율적인 방법이 있습니다.

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

이 도서관에는 ResizeSensor 클래스가 있습니다 크기 조정 감지에 사용할 수 있습니다.
이벤트 기반 접근 방식을 사용하므로 빠르며 CPU 시간을 낭비하지 않습니다.

예 :

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

setTimeout() 를 사용하므로jQuery onresize 플러그인을 사용하지 마십시오  변경 사항을 확인하기 위해 루프.
이것은 매우 느리고 정확하지 않습니다.

공개 :이 라이브러리와 직접 연결되어 있습니다.

Chrome 64에서 사용할 수있는 Resize Observer API입니다.

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>

관찰자 크기 조정

사양 : https://wicg.github.io/ResizeObserver

폴리 필 : https://github.com/WICG/ResizeObserver/issues/3

Firefox 문제 : https://bugzil.la/1272409

사파리 문제 : http://wkb.ug/157743

현재 지원 : http://caniuse.com/#feat=resizeobserver

resize 를 바인딩해야합니다   window 의 이벤트  일반 html 요소가 아닌 객체입니다.

이것을 사용할 수 있습니다 :

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

콜백 함수 내에서 div 의 새로운 너비를 확인할 수 있습니다  전화

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

따라서 질문에 대한 답변은아니요이므로 resize 를 바인딩 할 수 없습니다.  div에 이벤트를 전달하십시오.

장기적으로 ResizeObserver를 사용할 수 있습니다.

new ResizeObserver(callback).observe(element);

안타깝게도 현재 많은 브라우저에서 기본적으로 지원되지 않습니다.

그 동안 다음과 같은 기능을 사용할 수 있습니다. 요소 크기 변경의 대부분은 DOM 크기 조정 또는 DOM의 창 크기 변경에서 비롯됩니다. 창의 크기 조정 이벤트를 사용하여 창 크기 조정을 청취 할 수 있으며 MutationObserver를 사용하여 DOM 변경 사항을 청취 할 수 있습니다.

다음은 이벤트의 결과로 제공된 요소의 크기가 변경 될 때 다시 호출하는 함수의 예입니다.

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's 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
  });
};

ResizeSensor.js는 거대한 라이브러리의 일부이지만 기능을THIS:

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);
});