ResizeObserver 是监听元素尺寸变化的原生 API，通过 observe() 监听、unobserve()/disconnect() 停止，支持多元素、精准响应 layout 尺寸变动，现代浏览器兼容良好，IE 需 polyfill 或降级方案。
ResizeObserver 是 JavaScript 中专门用来监听元素尺寸变化的 API，不用轮询、不依赖窗口 resize 事件，能精准响应元素宽高变动（包括由 CSS、JS 或内容变化引发的改变）。
ResizeObserver 的基本用法
创建实例时传入一个回调函数，该函数接收两个参数：entries（变化的观察项列表）和 observer（当前实例）。每个 entry 包含 target（被观察的元素）和 contentRect（最新尺寸信息）。
调用 observe(element) 开始监听指定元素 可同时观察多个元素，多次调用 observe 即可 用 unobserve(element) 停止监听单个元素，或 disconnect() 彻底停止所有监听
监听常见场景示例
比如监听一个卡片容器，当它因内部图片加载完成或文字换行而变高时，自动调整侧边栏高度：
const card = document.querySelector('.card');const observer = new ResizeObserver(entries => { for (let entry of entries) { console.log('新宽度：', entry.contentRect.width); console.log('新高度：', entry.contentRect.height); // 这里写你的响应逻辑，比如重绘图表、调整布局等 }});observer.observe(card);
注意兼容性和替代方案
现代浏览器（Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+）原生支持。IE 完全不支持，需用 polyfill（如 juggle/resize-observer）或降级为监听 window.resize + getBoundingClientRect 轮询（不推荐，性能差）。
立即学习“Java免费学习笔记（深入）”；
ResizeObserver 不监听滚动、透明度、z-index 等非尺寸属性变化，也不响应父容器 transform 缩放带来的视觉尺寸变化——它只关心 layout 尺寸（content box）的真实变动。
基本上就这些。用对了，页面自适应逻辑会干净很多。
以上就是什么是resize observer_javascript中如何监听尺寸变化？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542723.html
微信扫一扫 
支付宝扫一扫 
