我有以下示例 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 许可协议
有一种非常有效的方法可以确定元素的大小是否已更改。
http://marcj.github.io/css-element-queries/
这个库有一个类
ResizeSensor
可用于调整大小检测。它使用基于事件的方法,因此速度非常快并且不会浪费 CPU 时间。
例子:
请不要使用 _jQuery onresize 插件_,因为它使用
setTimeout()
结合循环读取 DOMclientHeight
/clientWidth
属性来检查更改。这是令人难以置信的缓慢和不准确,因为它会导致 布局抖动。
披露:我与这个图书馆直接相关。