2

我有一个非常简单的问题，或者至少看起来是这样。

我有一个 DIV 元素，它会立即调整大小。我希望能够捕捉到调整大小的时刻。

像这样的东西：

function myFunction(){
 alert('The DIV was resized');
}

divElement.addEventListener("resize", myFunction, false);

有人知道答案吗？

谢谢

4

4 回答 4

3

截至 2011 年 12 月，没有内置事件可以检测 div 何时调整大小，仅当窗口调整大小时。

查看这个相关问题：Detecting when a div's height changes using jQuery，以及该问题的解决方案中的这个插件：http: //benalman.com/projects/jquery-resize-plugin/

使用 jQuery 调整大小事件，您现在可以将调整大小事件处理程序绑定到窗口以外的元素，以获得超棒的调整大小！

为什么调整大小事件需要插件？

很久以前，当权者决定 resize 事件只会在浏览器的 window 对象上触发。不幸的是，这意味着如果您想知道另一个元素何时调整大小，则需要定期手动测试其宽度和高度以进行更改。虽然这个插件在内部并没有做任何花哨的事情来避免这种方法，但它提供的用于绑定事件的接口与 window 已经存在的接口完全相同。

对于所有元素，将启动一个内部轮询循环，该循环会定期检查元素大小的变化并在适当的时候触发事件。轮询循环仅在事件实际绑定到某处时运行，并在所有调整大小事件都未绑定时停止。

示例代码

// You know this one already, right?
$(window).resize(function(e){
  // do something when the window resizes
});

// Well, try this on for size!
$("#unicorns").resize(function(e){
  // do something when #unicorns element resizes
});

// And of course, you can still use .bind with namespaces!
$("span.rainbows").bind( "resize.rainbows", function(e){
  // do something when any span.rainbows element resizes
});
于 2012-04-11T16:35:37.340 回答
1

你可以试试这个插件 - http://benalman.com/code/projects/jquery-resize/examples/resize/

有各种各样的例子。尝试调整窗口大小并查看容器元素内的元素如何调整。

js小提琴的例子

在那个 resize() 事件绑定到具有类“test”的元素以及窗口对象，并且在窗口对象的调整大小回调中调用 $('.test').resize()。

例如

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

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

看到这个

于 2013-10-17T04:20:01.540 回答
0

有一种非常有效的方法可以确定元素的大小是否已更改。

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

这个库有一个类 ResizeSensor 可用于调整大小检测。它使用基于事件的方法，因此速度非常快并且不会浪费 CPU 时间。

请不要使用jQuery onresize 插件，因为它使用setTimeout()循环来检查更改。这是非常缓慢且不准确的。

于 2013-10-17T03:56:56.420 回答
0

我的第一个想法是使用自定义事件系统。你可以在这里找到一个纯 javascript ( http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/ )

包含他的代码后，您可以执行以下操作：

function myFunction(){
 alert('The DIV was resized');
}

div_elm = document.getElmentById('div-to-resize');
EventTarget.call(div_elm);
div_elm.addListener("resize", myFunction);

然后，只需在要调整 div 大小的任何位置添加一行。

div_elm.width += 100 //or however you are resizing your div
div_elm.fire("resize");

我认为这应该对你有用。

编辑：

如果您不是编码调整大小的人，那么我的第一个想法是这样的：

var resizeScannerInterval_id = (function(div) {
    var width = div.offsetWidth;
    var height = div.offsetHeight;

    var interval_id = setInterval(function() {
        if( div.offsetWidth != width || div.offsetHeight != height )
            width = div.offsetWidth;
            height = div.offsetHeight;
            div.fire();
        }
    },250);

})(document.getElementById('div-id'))
于 2012-04-11T16:55:09.130 回答