如何检测 DIV 的尺寸变化?

新手上路,请多包涵

我有以下示例 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>

原文由 William X 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 985
2 个回答

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

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

这个库有一个类 ResizeSensor 可用于调整大小检测。

它使用基于事件的方法,因此速度非常快并且不会浪费 CPU 时间。

例子:

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

请不要使用 _jQuery onresize 插件_,因为它使用 setTimeout() 结合循环读取 DOM clientHeight / clientWidth 属性来检查更改。

这是令人难以置信的缓慢和不准确,因为它会导致 布局抖动

披露:我与这个图书馆直接相关。

原文由 Marc J. Schmidt 发布,翻译遵循 CC BY-SA 4.0 许可协议

一个较新的标准是 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>

调整观察者大小

文档: https ://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

规范: https ://wicg.github.io/ResizeObserver

当前支持: http ://caniuse.com/#feat=resizeobserver

Polyfills: https ://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer

原文由 Daniel Herr 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题