Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
280 views
in Technique[技术] by (71.8m points)

javascript - 如何检测DIV的尺寸变化?(How to detect DIV's dimension changed?)

I've the following sample html, there is a DIV which has 100% width.(我有以下示例html,有一个DIV,其宽度为100%。)

It contains some elements.(它包含一些元素。) While performing windows re-sizing, the inner elements may be re-positioned, and the dimension of the div may change.(在执行窗口调整大小时,内部元素可能会重新放置,并且div的尺寸可能会更改。) I'm asking if it is possible to hook the div's dimension change event?(我问是否有可能挂钩div的尺寸更改事件?) 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:(我目前将回调函数绑定到目标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>   ask by William Choi translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There is a very efficient method to determine if a element's size has been changed.(有一种非常有效的方法来确定元素的大小是否已更改。)

http://marcj.github.io/css-element-queries/(http://marcj.github.io/css-element-queries/) This library has a class ResizeSensor which can be used for resize detection.(该库具有ResizeSensor类,可用于调整大小检测。)
It uses an event-based approach, so it's damn fast and doesn't waste CPU time.(它使用基于事件的方法,因此该死的速度很快,并且不会浪费CPU时间。) 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.(请不要使用jQuery onresize插件,因为它使用setTimeout()循环来检查更改。)
THIS IS INCREDIBLY SLOW AND NOT ACCURATE .(这是缓慢且不够精确的 。) Disclosure: I am directly associated with this library.(披露:我直接与此图书馆有联系。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...