如何监听特定HTML元素的布局更改？

What are some techniques for listening for layout changes in modern browsers? window.resize won't work because it only fires when the entire window is resized, not when content changes cause reflow.

在现代浏览器中监听布局更改的一些技巧是什么? window.resize将不起作用,因为它仅在调整整个窗口大小时触发,而不是在内容更改导致重排时触发。

Specifically, I'd like to know when:

具体来说,我想知道什么时候:

An element's available width changes.

元素的可用宽度发生变化。

The total height consumed by the in-flow children of an element changes.

元素的流入子元素消耗的总高度会发生变化。

2 个解决方案

#1

There are no native events to hook into for this. You need to set a timer and poll this element's dimensions in your own code.

没有本地事件可以为此加入。您需要设置一个计时器并在您自己的代码中轮询此元素的维度。

Here's the basic version. It polls every 100ms. I'm not sure how you want to check the children's height. This assumes they'll just make their wrapper taller.

这是基本版本。它每100毫秒轮询一次。我不确定你要怎么检查孩子的身高。这假设他们只会让他们的包装更高。

var origHeight = 0;
var origWidth = 0;
var timer1;

function testSize() {
     var $target = $('#target')     
     if(origHeight==0) {
         origWidth = $target.outerWidth();
         origHeight = $target.outerHeight();

     }
     else {
         if(origWidth != $target.outerWidth() || origHeight = $target.outerHeight()) {
             alert("change");  
         }
         origWidth = $target.outerWidth();
         origHeight = $target.outerHeight();
         timer1= window.setTimeout(function(){ testSize() }),100)
     } 

}

#2

From a similar question How to know when an DOM element moves or is resized, there is a jQuery plugin from Ben Alman that does just this. This plugin uses the same polling approach outlined in Diodeus's answer.

从类似的问题如何知道DOM元素何时移动或调整大小,Ben Alman的jQuery插件就是这样做的。此插件使用Diodeus答案中概述的相同轮询方法。

Example from the plugin page:

插件页面中的示例:

// Well, try this on for size!
$("#unicorns").resize(function(e){
  // do something when #unicorns element resizes
});

#1