복붙노트

[JQUERY] DIV의 크기는 어떻게 변경 감지하는?

JQUERY

DIV의 크기는 어떻게 변경 감지하는?

해결법

  1. 1.a 요소의 크기가 변경된 경우 결정하는 매우 효과적인 방법이있다.

    a 요소의 크기가 변경된 경우 결정하는 매우 효과적인 방법이있다.

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

    이 라이브러리는 크기 조정 감지에 사용할 수있는 클래스 ResizeSensor 있습니다. 그것은 그래서 망할 빨리와 CPU의 시간을 낭비하지 않는, 이벤트 기반 접근 방식을 사용합니다.

    예:

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

    사용하지 않는하십시오 jQuery를하여 onResize 플러그인이 변화를 확인하기 위해 루프에서 DOM clientHeight / clientWidth 속성을 읽기와 함께 ()에서는 setTimeout을 사용한다. 이 레이아웃 탈곡 원인 때문에 이것은 놀라운 느리고 부정확하다.

    공개 : 내가 직접이 라이브러리와 연관된하고있다.

  2. 2.이 새로운 표준은 크롬 64에서 사용할 수있는 크기 조정 관찰자 API를이다.

    이 새로운 표준은 크롬 64에서 사용할 수있는 크기 조정 관찰자 API를이다.

    outputsize 함수 () { width.value = textbox.offsetWidth height.value = textbox.offsetHeight } outputsize () 새로운 ResizeObserver (outputsize) .observe (텍스트 상자) 폭 : <출력 ID = "폭"> 0 로
    신장 <출력 ID = "높이"> 0 로
    <텍스트 영역 ID = "텍스트 상자"> 크기 조정 나 로

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

    Polyfills : https://github.com/WICG/ResizeObserver/issues/3

    파이어 폭스 문제 : https://bugzil.la/1272409

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

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

  3. 3.장기적으로, 당신은 ResizeObserver를 사용할 수 있습니다.

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

    new ResizeObserver(callback).observe(element);

    불행히도 현재 많은 브라우저에서 기본적으로 지원되지 않습니다.

    그 동안, 당신은 다음과 같은 기능을 사용할 수 있습니다. 이후, 요소 크기 변화의 대부분은 창 크기 조정에서 또는 DOM에 무언가를 변경하는 올 것이다. 당신은 윈도우의 크기 조정 이벤트와 크기 조절 창을들을 수 있으며, 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'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
  });
};

  4. 4.당신은 아닌 일반적인 html 요소에 창 개체의 크기 조정 이벤트를 바인딩해야합니다.

    당신은 아닌 일반적인 html 요소에 창 개체의 크기 조정 이벤트를 바인딩해야합니다.

    그런 다음이를 사용할 수 있습니다 :

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

    및 콜백 함수 내에서 당신은 당신의 사업부 통화의 새로운 폭을 확인하실 수 있습니다

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

    따라서, 귀하의 질문에 대한 대답은 당신이 어떤 사업부에 resize 이벤트 바인드 할 수 없습니다.

  5. 5.ResizeSensor.js 거대한 라이브러리의 일부입니다,하지만 난 여기에 그 기능을 감소 :

    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. 6.나는 ()의 setTimeout을 추천는 성능이 저하로 해킹하지 마십시오! 대신 사업부의 크기 변경을 듣고에 대한 DOM 돌연변이 관계자를 사용할 수 있습니다.

    나는 ()의 setTimeout을 추천는 성능이 저하로 해킹하지 마십시오! 대신 사업부의 크기 변경을 듣고에 대한 DOM 돌연변이 관계자를 사용할 수 있습니다.

    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 크기가 조절되는 밀리 초마다 트리거의 모든 X 밀리 초 대신 방법을 트리거합니다.

  7. 7.가장 좋은 방법은 소위 요소 쿼리를 사용하는 것입니다. 그러나, 그들은 표준 없습니다, 어떤 사양은 존재하지 않는다 - 유일한 옵션은이 길을 갈 것인지, 사용할 수있는 polyfills / 라이브러리 중 하나를 사용하는 것입니다.

    가장 좋은 방법은 소위 요소 쿼리를 사용하는 것입니다. 그러나, 그들은 표준 없습니다, 어떤 사양은 존재하지 않는다 - 유일한 옵션은이 길을 갈 것인지, 사용할 수있는 polyfills / 라이브러리 중 하나를 사용하는 것입니다.

    요소 쿼리 뒤에 아이디어는 제공 년대 공간으로 대응할 수있는 페이지의 특정 컨테이너를 허용하는 것입니다. 이 번 구성 요소를 작성하고 그것의 현재 크기에 그 내용을 조정합니다 동안 다음 페이지의 아무 곳이나 드롭 할 수 있습니다. 없음 창 크기가 무슨 상관. 이것은 우리가 요소 쿼리 및 미디어 쿼리 사이에 볼 수있는 최초의 차이입니다. 어떤 점에서 사양 (같은 목표를 달성 또는 무언가) 요소 쿼리를 표준화하고는, 네이티브 깨끗하고, 간단하고 강력한 만들 것 만들어집니다 모두의 희망. 대부분의 사람들은 미디어 쿼리가 매우 제한되어 있음을 동의 및 모듈 형 설계와 실제 응답에 대한 도움말을하지 않습니다.

    (대신 솔루션 생각의 해결 방법이라고 할 수있다) 다른 방법으로 문제를 해결 몇 polyfills / 라이브러리가 있습니다 :

    내가 제안 유사한 문제에 대한 다른 솔루션을 보았다. 보통 그들은 진정한 해결책이 아니라 후드 아래 타이머 또는 창 / 뷰포트 크기를 사용합니다. 또한,이 주로 CSS에 해결, 그리고 자바 스크립트 나 HTML이 이상적으로 생각합니다.

  8. 8.MarcJ의 솔루션은하지 않았다 때 나는 일에이 라이브러리를 발견 :

    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>

  9. 9.이것 좀 봐 http://benalman.com/code/projects/jquery-resize/examples/resize/를 타고

    이것 좀 봐 http://benalman.com/code/projects/jquery-resize/examples/resize/를 타고

    다양한 예제가 있습니다. 당신의 창 크기를 조정 시도하고 컨테이너 요소 내부 요소를 조정하는 방법을 참조하십시오.

    JS와 예 그것에게 일을 얻는 방법을 설명하는 바이올린. 이 바이올린을 살펴 http://jsfiddle.net/sgsqJ/4/를 타고

    그 크기 조정에서 () 이벤트는 윈도우 개체 또한 클래스 '테스트'등을 갖는 요소에 바인딩 창 개체 $의 크기 조정 콜백 ( '. 테스트'). 크기 조정은 ()가 호출된다.

    EG

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

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

  10. 10.당신은 iframe을 사용하거나 크기 조정에 contentWindow 또는 contentDocument를 사용하여 객체를 할 수 있습니다. setInterval을 또는에서는 setTimeout없이

    당신은 iframe을 사용하거나 크기 조정에 contentWindow 또는 contentDocument를 사용하여 객체를 할 수 있습니다. setInterval을 또는에서는 setTimeout없이

    <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>

    자바 스크립트 :

    $('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/

  11. 11.만 창 객체는 "크기 조정"이벤트를 생성합니다. 당신이 원하는 일을 할 수있는 내가 아는 유일한 방법은 정기적으로 크기를 확인하는 것이 간격 타이머를 실행하는 것입니다.

    만 창 객체는 "크기 조정"이벤트를 생성합니다. 당신이 원하는 일을 할 수있는 내가 아는 유일한 방법은 정기적으로 크기를 확인하는 것이 간격 타이머를 실행하는 것입니다.

  12. 12.VAR DIV = document.getElementById를 ( 'DIV'); div.addEventListener ( '크기 조정 "(이벤트) => CONSOLE.LOG (에서는 event.detail)); {checkResize (돌연변이) 함수 VAR 엘 돌연변이 = [0] .target; w = el.clientWidth VAR; VAR h를 el.clientHeight를 =; VAR isChange 돌연변이를 = .MAP ((m) => m.oldValue + ') K2661에 ((이전) => prev.indexOf ( '폭'+ + 'PX') == -1 || prev.indexOf ( '높이'w + H + 'PX') == -1); 만약 (! isChange) 반환; VAR 이벤트가 새로운 맞춤 이벤트 = ( '크기 조정'세부 {{폭 : 높이 w : H}}); el.dispatchEvent (이벤트); } var에 관찰자는 새로운 MutationObserver (checkResize를) =; observer.observe (DIV, {속성 : 사실 attributeOldValue : 사실, attributeFilter : [ '스타일']}); #div {폭 : 100 픽셀; 국경 : 1 픽셀의 고체 #bbb; 크기 조정 : 모두; 오버 플로우 : 숨겨진;}
    DIV

    VAR DIV = document.getElementById를 ( 'DIV'); div.addEventListener ( '크기 조정 "(이벤트) => CONSOLE.LOG (에서는 event.detail)); {checkResize (돌연변이) 함수 VAR 엘 돌연변이 = [0] .target; w = el.clientWidth VAR; VAR h를 el.clientHeight를 =; VAR isChange 돌연변이를 = .MAP ((m) => m.oldValue + ') K2661에 ((이전) => prev.indexOf ( '폭'+ + 'PX') == -1 || prev.indexOf ( '높이'w + H + 'PX') == -1); 만약 (! isChange) 반환; VAR 이벤트가 새로운 맞춤 이벤트 = ( '크기 조정'세부 {{폭 : 높이 w : H}}); el.dispatchEvent (이벤트); } var에 관찰자는 새로운 MutationObserver (checkResize를) =; observer.observe (DIV, {속성 : 사실 attributeOldValue : 사실, attributeFilter : [ '스타일']}); #div {폭 : 100 픽셀; 국경 : 1 픽셀의 고체 #bbb; 크기 조정 : 모두; 오버 플로우 : 숨겨진;}

    DIV

  13. 13.이 문제를 그대로 놀랍게도 오래된, 이것은 여전히 ​​대부분의 브라우저에서 문제가된다.

    이 문제를 그대로 놀랍게도 오래된, 이것은 여전히 ​​대부분의 브라우저에서 문제가된다.

    다른 사람이 말했듯이, 크롬 64 + 크기 조정과 함께 지금 배는 기본적으로, 그러나, 스펙은 여전히 ​​미세 조정되고 관찰하고 크롬 사양의 최신 버전 뒤에 (2019년 1월 29일 현재) 현재 지금이다.

    나는 야생에서 좋은 ResizeObserver의 polyfills의 몇 가지를 본 적이 있지만, 일부는 밀접하게 사양을 따르지 않는 등 몇 가지 계산 문제가 있습니다.

    나는 모든 응용 프로그램에 사용될 수있는 몇 가지 반응 형 웹 구성 요소를 만들려면이 동작을 절실히 필요했다. 그들이 ResizeObservers 이상적인를 소리 나는 밀접하게 가능한 사양을 다음에 polyfill을 만들기로 결정 그래서 그들은 항상 자신의 크기를 알 필요가 잘 작동하게합니다.

    리포 : https://github.com/juggle/resize-observer

    데모: https://codesandbox.io/s/myqzvpmmy9

  14. 14.사용 Clay.js (https://github.com/zzarcon/clay은)는 요소 크기에 변화를 감지하는 것은 매우 간단합니다 :

    사용 Clay.js (https://github.com/zzarcon/clay은)는 요소 크기에 변화를 감지하는 것은 매우 간단합니다 :

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

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

  15. 15.이 블로그 게시물은 나를 효율적으로 DOM 요소의 크기 변화를 감지 할 수있었습니다.

    이 블로그 게시물은 나를 효율적으로 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가 재사용 가능한 기능을 구성하는 네임 스페이스 / 오브젝트 I의 사용이다. 검색하고 싶은 아무것도 이름을 대체 주시기 바랍니다.

  16. 16.내 jQuery 플러그인은 모든 요소뿐만 아니라 창에서 "크기 조정"이벤트를 할 수 있습니다.

    내 jQuery 플러그인은 모든 요소뿐만 아니라 창에서 "크기 조정"이벤트를 할 수 있습니다.

    https://github.com/dustinpoissant/ResizeTriggering

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

  17. 17.당신은 다음 코드의 코드를 시도 할 수 있습니다, 그것은 일반 자바 스크립트를 사용하여 사용자의 요구를 다룹니다. (코드 조각을 실행하고 당신이 그것을 테스트하려는 경우 사업부 크기가 조절된다는 경고를 트리거하기 위해 전체 페이지 링크를 클릭하십시오.).

    당신은 다음 코드의 코드를 시도 할 수 있습니다, 그것은 일반 자바 스크립트를 사용하여 사용자의 요구를 다룹니다. (코드 조각을 실행하고 당신이 그것을 테스트하려는 경우 사업부 크기가 조절된다는 경고를 트리거하기 위해 전체 페이지 링크를 클릭하십시오.).

    VAR 폭 = 0; VAR하여 setInterval 간격 = (함수 () { 경우 (폭 <= 0) { 폭 = document.getElementById를 ( "test_div") clientWidth.; } (document.getElementById를 ( "test_div"). clientWidth! == 폭) {경우 경고 ( '크기가 조정 DIV'); 폭 = document.getElementById를 ( "test_div") clientWidth.; } }, 100);

    또한 바이올린을 확인하실 수 있습니다

    최신 정보

    VAR 폭 = 0; myInterval 함수 () { VAR하여 setInterval 간격 = (함수 () { 경우 (폭 <= 0) { 폭 = document.getElementById를 ( "test_div") clientWidth.; } (document.getElementById를 ( "test_div"). clientWidth! == 폭) {경우 경고 ( '크기 조정'); 폭 = document.getElementById를 ( "test_div") clientWidth.; } }, 100); 복귀 구간; } VAR myInterval 간격 = (); document.getElementById를 ( "clickMe"). 또는 addEventListener는 ({) (함수를 "클릭" (대해서 typeof 간격! == "미등록") 경우에 { 됨 clearInterval (간격); 경고 ( "스니핑 DIV 크기 조정을 중지"); } }); document.getElementById를 ( "clickMeToo"). 또는 addEventListener는 ({) (함수를 "클릭" myInterval (); 경고 ( "스니핑 DIV 크기 조정을 시작했다"); });

    업데이트 바이올린

  18. 18.이것은 거의 정상 응답의 정확한 사본이지만, 대신 링크, 그것은 번역 문제는, IMO 읽기 쉽고 이해하기 쉽게 될 수있는 코드의 단지 부분입니다. 다른 몇 가지 작은 변화 cloneNode ()를 사용하고, JS 문자열로 HTML을 참을 수 없어이 포함됩니다. 작은 물건,하지만 당신은 복사하고이 그대로 붙여 넣기가 작동 할 수 있습니다.

    이것은 거의 정상 응답의 정확한 사본이지만, 대신 링크, 그것은 번역 문제는, IMO 읽기 쉽고 이해하기 쉽게 될 수있는 코드의 단지 부분입니다. 다른 몇 가지 작은 변화 cloneNode ()를 사용하고, JS 문자열로 HTML을 참을 수 없어이 포함됩니다. 작은 물건,하지만 당신은 복사하고이 그대로 붙여 넣기가 작동 할 수 있습니다.

    작동 방법은 두 눈에 보이지 않는 div의 당신이보고있는 요소를 입력하고, 다음 각 트리거를 가하고, 그리고 크기가 변경되면 스크롤 변화를 트리거로 이어질 것입니다 스크롤 위치를 설정하는 것입니다.

    모든 실제 신용 마크 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. 19.여기에 하나의 요소에 적용 @nkron에 의한 용액의 단순화 된 버전입니다 (대신 @ nkron의 대답 요소의 배열이 복잡 내가 필요하지 않았다).

    여기에 하나의 요소에 적용 @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();

  20. 20.요소는 CSS를 크기 조정 버튼 크기를 조정하는 경우에만 순수 자바 스크립트 솔루션,하지만 작품 :

    요소는 CSS를 크기 조정 버튼 크기를 조정하는 경우에만 순수 자바 스크립트 솔루션,하지만 작품 :

  21. 21.

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

});

  22. 22.단순히 당신의 바인드 콜백 내부 false를 반환 바랏 파틸 응답을 사용하여 아래의 최대 스택 오류를 참조 예를 방지하기 위해 :

    단순히 당신의 바인드 콜백 내부 false를 반환 바랏 파틸 응답을 사용하여 아래의 최대 스택 오류를 참조 예를 방지하기 위해 :

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

  23. 23.이것은 정말 오래된 질문이지만, 나는이 내 솔루션을 게시 거라고 생각.

    이것은 정말 오래된 질문이지만, 나는이 내 솔루션을 게시 거라고 생각.

    나는 모두가 거기에 꽤 큰 호감을 가진 것 같았다 때문에 ResizeSensor을 사용했습니다. 하지만 구현 한 후, 나는 후드 요소 쿼리 내 상황에 대한 작업을하지 않았다 적용된 위치의 상대 또는 절대를 가지고 문제의 요소를 필요로한다는 것을 깨달았다.

    나는 Rxjs 간격 대신 이전의 구현과 같은 직선의 setTimeout 또는 requestAnimationFrame로이 처리 끝났다.

    간격의 관측 맛에 대한 좋은는 당신이 다른 관측을 처리 할 수 ​​있지만 스트림을 수정할 수 있다고되어 있습니다. 나를 위해, 기본적인 구현은 충분했다,하지만 당신은 미쳐 등 병합, 모든 종류의 할 수

    아래 예제에서는 내부 (녹색) 사업부의 폭의 변화를 추적하고 있습니다. 이는 50 %의 폭을 설정하지만, 200 픽셀의 최대 폭을 갖는다. 슬라이더를 드래그하면 래퍼 (회색) 사업부의 폭에 영향을 미친다. 당신이 볼 수있는 내부 사업부가 외부 DIV의 폭보다 작은 400 픽셀 인 경우에만 발생 폭 변화를의 관찰에만 발생합니다.

    CONST 간격 {} = rxjs; CONST {distinctUntilChanged, 맵} = rxjs.operators 필터; CONST 래퍼 = document.getElementById를 ( '내-래퍼'); CONST = document.getElementById를 입력 ( '폭 입력'); subscribeToResize 함수 () { CONST = 타이머 구간 (100); const를 myDiv = document.getElementById를 ( '내-DIV'); CONST widthElement = document.getElementById를 ( '폭'); CONST = document.getElementById를 .isMax에은 ( '인 맥스'); / * 참고 :이 여기에 중요한 비트입니다 * / 시간제 노동자 .파이프( 맵핑 (?. () => myDiv Math.round (myDiv.getBoundingClientRect () 폭) : 1), distinctUntilChanged () 구성 요소가 파괴 될 때 // takeUntil (), 여기뿐만 아니라 정리를 허용 할 추가 ) .subscribe ((폭) => { widthElement.innerHTML = 폭; === isMax.innerHTML 폭 = 200? '최대 폭''50 % 폭 '; }); } defineRange 함수 () { input.min = 200; input.max = window.innerWidth; input.step = 10; input.value input.max = - 50; } bindInputToWrapper 함수 () { input.addEventListener ( "입력"(이벤트) => { wrapper.style.width = '$ {event.target.value} px`; }); } defineRange (); () subscribeToResize; bindInputToWrapper (); .inner { 폭 : 50 %; 최대 폭 : 200 픽셀; } / * 미적 스타일에만 * / .inner { 배경 : # 16a085; } .wrapper { 배경 : # ecf0f1; 색상 : 흰색; 여백 - 상단 : 24 픽셀; } .content { 패딩 : 12 픽셀; } 몸 { 글꼴 - 가족 : 산세 리프; 폰트 중량 : 굵은; } <스크립트 SRC = "https://unpkg.com/rxjs/bundles/rxjs.umd.min.js">

    리사이즈 브라우저 폭 <레이블 = "너비 - 입력"> 래퍼 요소의 폭을 조정
    폭 : <스팬 ID = "폭"> PX

  24. 24.만 Window.onResize은 사양에 존재하지만 당신은 항상 당신의 DIV 안에 새 창 객체를 생성 할 수있는 IFrame을 활용할 수 있습니다.

    만 Window.onResize은 사양에 존재하지만 당신은 항상 당신의 DIV 안에 새 창 객체를 생성 할 수있는 IFrame을 활용할 수 있습니다.

    이 답변을 확인하시기 바랍니다. 휴대용 및 사용하기 쉬운 수있는 새로운 작은 jQuery 플러그인이있다. 당신은 항상 어떻게하는지 확인하기 위해 소스 코드를 확인할 수 있습니다.

    <!-- (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's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

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

  25. 25.내가 그것을 할 수 없습니다 생각하지만 난 당신이 수동으로 스타일을 통해 = 사업부의 크기를 조정할 수 있습니다, 그것에 대해 생각 "크기 조정 : 모두;" 당신이 그것을 클릭 집결지 그렇게하기 위해 이렇게 체크 요소의 높이와 폭에 온 클릭 기능을 추가하고 일했다. 순수 자바 스크립트의 5 라인 (확인 심지어 짧아 질 수 있음) http://codepen.io/anon/pen/eNyyVN

    내가 그것을 할 수 없습니다 생각하지만 난 당신이 수동으로 스타일을 통해 = 사업부의 크기를 조정할 수 있습니다, 그것에 대해 생각 "크기 조정 : 모두;" 당신이 그것을 클릭 집결지 그렇게하기 위해 이렇게 체크 요소의 높이와 폭에 온 클릭 기능을 추가하고 일했다. 순수 자바 스크립트의 5 라인 (확인 심지어 짧아 질 수 있음) 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>

    26. from https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 비동기 이미지로드  (0) 2020.09.29
[JQUERY] jQuery를 사용하여 드롭 다운의 항목의 선택 값을 가져옵니다  (0) 2020.09.29
[JQUERY] jQuery를 이벤트 : 사업부의 HTML / 텍스트에 대한 변경 사항을 감지  (0) 2020.09.29
[JQUERY] 는 DOM 요소가 제거 된 경우, 그 청취자는 메모리에서 제거된다?  (0) 2020.09.29
[JQUERY] jQuery를 선택기에서 와일드 카드  (0) 2020.09.29
,

티스토리툴바