首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >调整div元素的大小

调整div元素的大小
EN

Stack Overflow用户
提问于 2012-04-10 18:04:01
回答 10查看 169.1K关注 0票数 87

jQuery有resize() - event,但它只适用于window。

代码语言:javascript
复制
jQuery(window).resize(function() { /* What ever */ });

这可以很好地工作!但是,当我想要将事件添加到div元素时,它不起作用。

例如。

代码语言:javascript
复制
jQuery('div').resize(function() { /* What ever */ });

当div-element的大小发生变化时,我想启动一个回调。我不想启动一个可调整大小的事件--只是一个检查div元素的大小是否改变的事件。

有什么解决方案可以解决这个问题吗?

EN

回答 10

Stack Overflow用户

发布于 2012-04-10 18:08:10

DIV不会触发resize事件,因此您将无法执行您编写的代码,但是您可以查看monitoring DOM properties

如果你实际使用的是可调整大小的东西,并且这是div改变大小的唯一方法,那么你的resize插件可能会实现它自己的回调。

票数 35
EN

Stack Overflow用户

发布于 2014-09-28 01:07:04

我只对元素宽度改变时的触发器感兴趣(我不关心高度),所以我使用不可见的iframe元素创建了一个jquery事件来实现这一点。

代码语言:javascript
复制
$.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:

代码语言:javascript
复制
iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

你可以在这里看到它的实际效果widthChanged fiddle

票数 34
EN

Stack Overflow用户

发布于 2015-06-11 00:08:31

代码语言:javascript
复制
// 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));
票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10086693

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档