Question

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

我有一个DIV元素，它会在一刻重新调整大小。我希望能够抓住调整大小的时刻。

这样的事情：

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

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

有谁知道答案？

由于

Answer 1

截至2011年12月，没有内置事件来检测div何时调整大小，就像窗口调整大小一样。

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

使用jQuery resize事件，您现在可以将resize事件处理程序绑定到   除了窗户之外的元素，超级棒的大小！伟大！

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

很久以前，权力决定只有调整大小的事件   触发浏览器的窗口对象。不幸的是，这意味着如果   你想知道什么时候另一个元素已经调整大小   定期手动测试其宽度和高度以进行更改。而   这个插件在内部没有任何花哨的东西可以避免这种情况   方法，它为绑定事件提供的接口是完全正确的   与窗口已有的相同。

对于所有元素，启动内部轮询循环   定期检查元素大小的变化并触发事件   在适当的时候。轮询循环仅在事件发生后运行   实际上绑定到某个地方，并在所有调整大小事件时停止   未结合的。

示例代码

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

Answer 2

您可以尝试使用此插件 - http://benalman.com/code/projects/jquery-resize/examples/resize/

有各种各样的例子。尝试调整窗口大小，看看容器元素中的元素是如何调整的。

Example with js fiddle

因为resize（）事件绑定到具有类“test”的元素以及窗口对象和窗口对象$（'。test'）的resize回调中。调用resize（）。

e.g。

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

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

See this

Answer 3

我的第一个想法是使用自定义事件系统。你可以在这里找到纯粹的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'))

Answer 4

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

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

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

请执行不使用 jQuery onresize插件，因为它使用setTimeout()循环来检查更改。这是令人难以置信的缓慢而不准确。

Javascript自定义调整大小事件

4 个答案: