监测div大小变化_如何检测DIV的尺寸变化？

我有以下示例html，有一个DIV，其宽度为100％。 它包含一些元素。 在执行窗口调整大小时，内部元素可能会重新放置，并且div的尺寸可能会更改。 我问是否有可能挂钩div的尺寸更改事件？ 以及如何做到这一点？ 我目前将回调函数绑定到目标DIV上的jQuery resize事件，但是，没有控制台日志输出，请参见以下内容：

$('#test_div').bind('resize', function(){

console.log('resized');

});

#1楼

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

该库具有ResizeSensor类，可用于调整大小检测。

它使用基于事件的方法，因此该死的速度很快，并且不会浪费CPU时间。

例：

new ResizeSensor(jQuery('#divId'), function(){

console.log('content dimension changed');

});

请不要使用jQuery onresize插件，因为它使用setTimeout()循环来检查更改。

这是缓慢且不够精确的 。

披露：我直接与此图书馆有联系。

#2楼

规范中仅存在Window.onResize ，但是您始终可以利用IFrame在DIV中生成新的Window对象。

请检查此答案 。 有一个新的小jquery插件 ，可移植且易于使用。 您始终可以检查源代码以了解其完成方式。

// (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...

}

#3楼

我以为无法完成，但是后来我想到了，您可以通过style =“ resize：both;”手动调整div的大小。 为了做到这一点，您必须单击它，因此添加了一个onclick函数来检查元素的高度和宽度，并且它可以正常工作。 仅使用5行纯JavaScript(确保它可能更短) http://codepen.io/anon/pen/eNyyVN

οnclick="myFunction()">

WxH

This my example demonstrates how to run a resize check on click for resizable div.

Try to resize the box.

function myFunction() {

var boxheight = document.getElementById('box').offsetHeight;

var boxhwidth = document.getElementById('box').offsetWidth;

var txt = boxhwidth +"x"+boxheight;

document.getElementById("sizeTXT").innerHTML = txt;

}

#4楼

最好的解决方案是使用所谓的元素查询 。 但是，它们不是标准的，没有规范-如果您想这样做，唯一的选择是使用一种可用的polyfills /库。

元素查询背后的想法是允许页面上的特定容器响应提供给它的空间。 这将允许编写一次组件，然后将其放在页面上的任何位置，同时它将其内容调整为当前大小。 无论窗口大小是多少。 这是我们在元素查询和媒体查询之间看到的第一个区别。 每个人都希望在某个时候可以创建一个规范，以标准化元素查询(或达到相同目标的东西)并使它们本机，干净，简单且健壮。 大多数人都认为媒体查询非常有限，对模块化设计和真正的响应能力没有帮助。

有一些polyfills /库以不同方式解决问题(尽管可以称为替代方法，而不是解决方案)：

我已经看到了针对类似问题的其他解决方案。 通常他们使用计时器或引擎盖下的窗口/视口大小，这不是真正的解决方案。 此外，我认为理想上应该主要在CSS中解决，而不是在javascript或html中解决。

#5楼

var el = new Clay('.element');

el.on('resize', function(size) {

console.log(size.height, size.width);

});