调整div元素的大小

Question

jQuery有resize()- 事件,但它只适用于窗口.

jQuery(window).resize(function() { /* What ever */ });

这很好用!但是当我想将事件添加到div元素时,它不起作用.

例如

jQuery('div').resize(function() { /* What ever */ });

我想在div元素的大小发生变化时开始回调.我不想启动可调整大小的事件 - 只是一个事件来检查div元素的大小是否已经改变.

有没有解决办法呢？

Answer 1

DIV不会触发resize事件,因此您将无法完全按照您编码的方式执行操作,但您可以查看监视DOM属性.

如果你实际上正在使用像resizable一样的东西,这是div改变大小的唯一方法,那么你的resize插件可能会实现自己的回调.

Answer 2

当元素的宽度发生变化(我不关心高度)时,我只对触发器感兴趣,所以我使用不可见的iframe元素创建了一个完全相同的jquery事件.

$.event.special.widthChanged = {
  remove: function() {
      $(this).children('iframe.width-changed').remove();
  },
  add: function () {
      var elm = $(this);
      var iframe = elm.children('iframe.width-changed');
      if (!iframe.length) {
          iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
      }
      var oldWidth = elm.width();
      function elmResized() {
          var width = elm.width();
          if (oldWidth != width) {
              elm.trigger('widthChanged', [width, oldWidth]);
              oldWidth = width;
          }
      }

      var timer = 0;
      var ielm = iframe[0];
      (ielm.contentWindow || ielm).onresize = function() {
          clearTimeout(timer);
          timer = setTimeout(elmResized, 20);
      };
  }
}

它需要以下css:

iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

你可以在这里看到widthChanged小提琴

Answer 3

// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})

(function ($) {

$.fn.sizeChanged = function (handleFunction) {
    var element = this;
    var lastWidth = element.width();
    var lastHeight = element.height();

    setInterval(function () {
        if (lastWidth === element.width()&&lastHeight === element.height())
            return;
        if (typeof (handleFunction) == 'function') {
            handleFunction({ width: lastWidth, height: lastHeight },
                           { width: element.width(), height: element.height() });
            lastWidth = element.width();
            lastHeight = element.height();
        }
    }, 100);


    return element;
};

}(jQuery));

Answer 4

我已经创建了 jquery 插件jquery.resize它使用 resizeObserver 如果支持或基于marcj/css-element-queries滚动事件的解决方案，没有 setTimeout/setInterval。

你只用

 jQuery('div').on('resize', function() { /* What ever */ });

或作为调整器插件

jQuery('div').resizer(function() { /* What ever */ });

我已经为 jQuery 终端创建了这个并提取到单独的 repo 和 npm 包中，但同时我切换到隐藏的 iframe，因为如果元素在 iframe 内，我在调整大小时遇到​​问题。我可能会相应地更新插件。您可以在 jQuery Terminal source code 中查看基于 iframe 的 resizer 插件。

编辑：新版本使用 iframe 并调整其窗口对象的大小，因为当页面位于 iframe 内时，以前的解决方案不起作用。

EDIT2：因为回退使用 iframe 你不能将它与表单控件或图像一起使用，你需要将它添加到包装器元素。

EDIT3 ::使用resizeObserver polyfill有更好的解决方案，它使用突变观察器（如果不支持 resizeObserver）并且甚至在 IE 中也能工作。它还具有 TypeScript 类型。

Answer 5

那这个呢:

divH = divW = 0;
jQuery(document).ready(function(){
    divW = jQuery("div").width();
    divH = jQuery("div").height();
});
function checkResize(){
    var w = jQuery("div").width();
    var h = jQuery("div").height();
    if (w != divW || h != divH) {
        /*what ever*/
        divH = h;
        divW = w;
    }
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);

顺便说一句,我建议你到一个ID添加到div和改变$("格"),以$("#yourid"),这会是更快,而当后来添加其它的div也不会断裂

Answer 6

今年发布了一个非常漂亮、易于使用、轻量级（使用本地浏览器事件进行检测）的基本 JavaScript 和 jQuery 插件。它完美地执行：

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

Answer 7

现在存在调整大小观察者

你可以像这样使用它：

const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(console.log);
})
resizeObserver.observe(document.getElementById("ExampleElement"));

Answer 8

仅支持窗口，但是您可以使用插件：http://benalman.com/projects/jquery-resize-plugin/