推荐答案
// www.javascriptcn.com code example
// 创建一个 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
// entry.target 是被观察的元素
// entry.contentRect 包含元素的尺寸信息
console.log('Element:', entry.target);
console.log('Width:', entry.contentRect.width);
console.log('Height:', entry.contentRect.height);
}
});
// 选择要观察的元素
const element = document.querySelector('.resizable-element');
// 开始观察元素
resizeObserver.observe(element);
// 如果需要停止观察
// resizeObserver.unobserve(element);本题详细解读
1. Resize Observer API 简介
Resize Observer API 是一个用于监听元素尺寸变化的接口。与传统的 resize 事件不同，Resize Observer 可以监听任意元素的尺寸变化，而不仅仅是窗口的尺寸变化。
2. 使用步骤
- 创建 ResizeObserver 实例：通过
new ResizeObserver(callback)创建一个 ResizeObserver 实例，其中callback是一个回调函数，当被观察元素的尺寸发生变化时会被调用。 - 定义回调函数：回调函数接收一个
entries参数，它是一个数组，包含了所有被观察元素的尺寸变化信息。每个entry对象包含target（被观察的元素）和contentRect（元素的尺寸信息）等属性。 - 选择要观察的元素：使用
document.querySelector或其他选择器方法获取要观察的元素。 - 开始观察元素：调用
resizeObserver.observe(element)开始观察指定的元素。 - 停止观察：如果需要停止观察某个元素，可以调用
resizeObserver.unobserve(element)。
3. 适用场景
- 响应式布局：在响应式设计中，元素的尺寸可能会随着窗口大小的变化而变化，使用 Resize Observer 可以实时获取元素的尺寸信息。
- 动态内容：当页面内容动态加载或变化时，元素的尺寸可能会发生变化，使用 Resize Observer 可以及时响应这些变化。
- 复杂布局：在复杂的布局中，元素的尺寸可能会受到其他元素的影响，使用 Resize Observer 可以精确地监听这些变化。
4. 兼容性
Resize Observer API 在现代浏览器中得到了广泛支持，但在一些旧版浏览器中可能不支持。可以使用 polyfill 来提供兼容性支持。