如何检测HTML5中任何元素的大小调整

Question

听元素调整事件的最佳实践应该是什么？

我想重新定位一个元素(在我的情况下是jQuery对话框),一旦它的大小改变了.但我现在更感兴趣的是以一般的方式来监听resize事件,而不知道调整大小是如何发生的.它假设很简单,直到我发现一个元素可以重新调整大小

• 窗口调整大小
• 内容文字更改
• 调整子元素或子元素的大小
• 一个兄弟元素调整大小(例如表中的单元格)
• JavaScript直接改变它的src(of img)/ style属性(或者是它的孩子的)
• JavaScript重写CSS规则或样式表
• 原生调整大小功能textarea或CSS3调整大小
• 浏览器的缩放或文字放大
• CSS过渡或动画(通过:悬停或任何其他意思)

在事实上的标准中,有一个事件window.onresize要在窗口/框架上订阅调整大小.但是HTML内容或DOM元素上没有标准事件.

我遇到了以下想法

• DOM级别3事件仅针对窗口/文档类型
• IE已针对Elements 进行了onresize,但它只是IE实现
• MutationObserver替换突变事件,但它不符合"onresize"的需要
• 天真的JavaScript轮询

MutationObserver是关闭的(内部DOM更改),但它(尚未)跨浏览器(IE10不支持)并且它产生噪声,而不是CSS感知.

天真的JavaScript轮询应该适用于所有情况,但它会产生许多轮询的延迟或CPU浪费.

Answer 1

截至 2020 年 7 月，ResizeObserver 在 W3C 和 WhatWG 中仍处于非官方状态，但自 2020 年 3 月 24 日起支持 Safari 13.1 以来，所有主要浏览器都已支持它。

仅供参考，有一个新的ResizeObserver API规范。铬似乎已经实现了它为2018年8月（见的唯一的浏览器caniuse.com），但有至少一个填充工具，你现在（使用可以使用）。MutationObserver