How to detect DIV's dimension changed?

后端 未结 25 2373
抹茶落季
抹茶落季 2020-11-22 06:14

I\'ve the following sample html, there is a DIV which has 100% width. It contains some elements. While performing windows re-sizing, the inner elements may be re-positioned,

相关标签:
25条回答
  • 2020-11-22 06:51

    There is a very efficient method to determine if a element's size has been changed.

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

    This library has a class ResizeSensor which can be used for resize detection.
    It uses an event-based approach, so it's damn fast and doesn't waste CPU time.

    Example:

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

    Please do not use the jQuery onresize plugin as it uses setTimeout() in combination with reading the DOM clientHeight/clientWidth properties in a loop to check for changes.
    This is incredible slow and inaccurate since it causes layout thrashing.

    Disclosure: I am directly associated with this library.

    0 讨论(0)
  • 2020-11-22 06:52

    I found this library to work when MarcJ's solution didn't:

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

    It's very lightweight and detects even natural resizes via CSS or simply the HTML loading/rendering.

    Code sample (taken from the link):

    <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>
    
    0 讨论(0)
  • 2020-11-22 06:52

    using Bharat Patil answer simply return false inside the your bind callback to prevent maximum stack error see example below:

    $('#test_div').bind('resize', function(){
       console.log('resized');
       return false;
    });
    
    0 讨论(0)
  • 2020-11-22 06:53

    I DO NOT recommend setTimeout() hack as it slows down the performance! Instead, you can use DOM mutation observers for listening to Div size change.

    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>
    

    Here's the fiddle
    Try to change the div size.


    You can further wrap your method in the debounce method to improve efficiency. debounce will trigger your method every x milliseconds instead of triggering every millisecond the DIV is being resized.

    0 讨论(0)
  • 2020-11-22 06:53

    Only Window.onResize exists in the specification, but you can always utilize IFrame to generate new Window object inside your DIV.

    Please check this answer. There is a new little jquery plugin, that is portable and easy to use. You can always check the source code to see how it's done.

    <!-- (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...
    }
    
    0 讨论(0)
  • 2020-11-22 06:53

    i thought it couldn't be done but then i thought about it, you can manually resize a div via style="resize: both;" in order to do that you ave to click on it so added an onclick function to check element's height and width and it worked. With only 5 lines of pure javascript (sure it could be even shorter) 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>
    
    0 讨论(0)
提交回复
热议问题