如何检测DIV的维度变化？

2018-07-01 08:45:46

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

调整大小之前在这里输入图像描述

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

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

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

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

例：

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

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

披露：我直接与这个图书馆有关。

这个新标准是Chrome 64中提供的Resize Observer API。

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

你必须在window对象上绑定resize事件，而不是在通用的html元素上。

你可以使用这个：

$(window).resize(function() {
    ...
});

并且在回调函数中，您可以检查您的div调用的新宽度

$('.a-selector').width();

所以，你的问题的答案是否定的 ，你不能将resize事件绑定到div。

链接地址: http://www.djcxy.com/p/87475.html

上一篇: How to detect DIV's dimension changed?

下一篇: How can I change font size in Eclipse for ALL text editors?