如何侦听特定 HTML 元素上的布局更改

Question

在

现代浏览器中侦听布局更改有哪些技术？ window.resize不起作用，因为它仅在调整整个窗口大小时触发，而不是在内容更改导致重排时触发。

具体来说，我想知道什么时候：

• 元素的可用宽度会发生变化。
• 元素的流入子项消耗的总高度会发生变化。

Answer 1

没有

本机事件可以为此挂钩。您需要设置一个计时器，并在您自己的代码中轮询此元素的维度。

这是基本版本。它每 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)
     } 
}

Answer 2

新的浏览器现在有 ResizeObserver ，当元素的内容框或边框框的尺寸更改时触发。

const observer = new ResizeObserver(entries => {
  const entry = entries[0];
  console.log('contentRect', entry.contentRect);
  // do other work here…
});
observer.observe(element);

Answer 3

来自一个类似的问题 如何知道 DOM 元素何时移动或调整大小，Ben Alman 有一个 jQuery 插件可以做到这一点。该插件使用与 Diodeus 答案中概述的相同轮询方法。

插件页面中的示例：

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