我需要检测元素何时为了响应内容而调整大小。我看到的示例都检测窗口是否已调整大小,但我找不到如何检测 DOM 元素是否调整大小。例如,以下仅计算窗口调整大小:
HTML:
<div id="resizer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac accumsan elit, sit amet ultrices massa. Pellentesque iaculis nulla ut fringilla pellentesque. Duis ut suscipit libero. Sed et mauris nisl.</div>
<output id="output1">Div not yet resized.</output>
<output id="output2">Window not yet resized.</output>
JS:
var divResizes = 0;
$("#resizer").resize(function(){
$('#output1').html("Div resized " + ++divResizes + " times.");
});
var windowResizes = 0;
$(window).resize(function() {
$('#output2').html("Window resized " + ++windowResizes + " times.");
});
调整窗口大小后的示例输出:
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Etiam ac accumsan elit,坐在 amet ultrices massa。Pellentesque iaculis nulla ut fringilla pellentesque。Duis ut suscipit libero。Sed et mauris nisl。Div 尚未调整大小。窗口大小调整了 23 倍。
SSCCE:http: //jsfiddle.net/3K2YY/