如何检测DIV的维度变化？ [英] How to detect DIV's dimension changed?
问题描述
我有下面的示例html，有一个宽度为100％的DIV。它包含一些元素。在执行窗口大小调整时，可能会重新定位内部元素，并且div的大小可能会发生变化。我问是否有可能钩住div的尺寸变化事件？以及如何做到这一点？我目前将回调函数绑定到目标DIV上的jQuery resize事件，但是，没有输出控制台日志，请参阅下面的内容：
< html>
< head>
< script type =text / javascriptlanguage =javascriptsrc =http://code.jquery.com/jquery-1.6.1.min.js>< / script>
< script type =text / javascriptlanguage =javascript>
$（'＃test_div'）。bind（'resize'，function（）{
console.log（'resized'）;
}）;
< / script>
< / head>
< body>
< div id =test_divstyle =width：100％; min-height：30px; border：1px dashed pink;>
< input type =buttonvalue =button 1/>
< input type =buttonvalue =button 2/>
< input type =buttonvalue =button 3/>
< / div>
< / body>
< / html>
有一种非常有效的方法来确定元素大小已更改。
http： //marcj.github.io/css-element-queries/
这个库有一个类 ResizeSensor code> ，可用于调整大小检测。
它使用基于事件的方法，因此速度很快，并且不会浪费CPU时间。
示例：
new ResizeSensor（jQuery（'＃divId'），function（）{
console.log（'content dimension changed'）;
} ）;
请勿使用 jQuery onresize插件，因为它使用 setTimeout（）循环来检查更改。
这个速度慢，不准确。
披露：我直接与这个库相关联。
I've the following sample html, there is a DIV which has 100% width. It contains some elements. While performing windows re-sizing, the inner elements may be re-positioned, and the dimension of the div may change. I'm asking if it is possible to hook the div's dimension change event? and How to do that? I currently bind the callback function to the jQuery resize event on the target DIV, however, no console log is outputted, see below:
<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>
There is a very efficient method to determine if a element's size has been changed.
http://marcj.github.io/css-element-queries/
This library has a class ResizeSensor which can be used for resize detection.
It uses an event-based approach, so it's damn fast and doesn't waste CPU time.
Example:
new ResizeSensor(jQuery('#divId'), function(){
console.log('content dimension changed');
});
Please do not use the jQuery onresize plugin as it uses setTimeout() loop to check for changes.
THIS IS INCREDIBLY SLOW AND NOT ACCURATE.
Disclosure: I am directly associated with this library.
这篇关于如何检测DIV的维度变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
