>

다음 샘플 HTML을 사용했는데 너비가 100 % 인 DIV가 있습니다. 일부 요소가 포함되어 있습니다. 창 크기 조정을 수행하는 동안 내부 요소의 위치가 변경되고 div의 크기가 변경 될 수 있습니다. div의 치수 변경 이벤트를 연결할 수 있는지 묻고 있습니까? 어떻게합니까? 현재 타겟 DIV의 jQuery 크기 조정 이벤트에 콜백 함수를 바인딩하지만 콘솔 로그가 출력되지 않습니다. 아래를 참조하십시오.

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <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>
</body>
</html>


  • 답변 # 1

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

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

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

    예 :

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

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

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

  • 답변 # 2

    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

  • 답변 # 3

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

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

    $(window).resize(function() {
        ...
    });
    
    
    콜백 함수 내에서 div 의 새로운 너비를 확인할 수 있습니다  전화

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

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

  • 답변 # 4

    장기적으로 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
      });
    };
    
    

  • 답변 # 5

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

  • 이전 amazon web services - TLS 사용 가능 연결로 Python을 사용하여 Sybase 및 Azure SQL Server에 연결하려고
  • 다음 php - 안드로이드 웹뷰에서 웹 사이트 세션을 유지하는 방법