0

我需要检测元素何时为了响应内容而调整大小。我看到的示例都检测窗口是否已调整大小，但我找不到如何检测 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/

4

2 回答 2

2

从文档：

“当浏览器窗口的大小发生变化时，resize 事件被发送到窗口元素：”

http://api.jquery.com/resize/

问题是 jQuery UI 函数 resizable 确实触发了浏览器事件“resize”。因此，您可以在更新的 jsFiddle 中看到，更改“调整大小”div 的大小会导致两者都计数，但延迟的大小更改不会。

http://jsfiddle.net/3K2YY/2/

t = setTimeout(function(){
    $("#resizer").width("50%");

}, 2000);

您应该找到其他事件/侦听器来检测此更改。我不确定这是否可能。您可以只使用窗口调整大小事件来（重新）检查其他元素的尺寸。

于 2013-09-09T15:22:56.997 回答
1

window在官方规范中只有一个onresize事件。使用来自的 polyfill

https://github.com/marcj/css-element-queries

让它工作。

这个库有一个ResizeSensor你可以使用的类。

var divResizes = 0;
new ResizeSensor($("#resizer"), function(){
    $('#output1').html("Div resized " + ++divResizes + " times.");
});
于 2014-09-13T14:40:07.027 回答