在Javascript中使用ResizeObserver 监听dom元素

最新推荐文章于 2025-05-20 23:11:59 发布
最新推荐文章于 2025-05-20 23:11:59 发布
阅读量2.3k 收藏 7
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zyf_maple/article/details/109652237

API介绍

当我们需要知道一个元素的大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于：

  1. 某个节点的出现和隐藏
  2. 某个节点的大小变化

ResizeObserver API是一个新的JavaScript API，与IntersectionObserver API非常相似，它们都允许我们去监听某个元素的变化。

实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式，在很多地方都有使用到。如Nodejs的Event模块，Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书，对Vue的通信感兴趣的可以看看Vue官网啦。

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）

ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

构造器

ResizeObserver()

创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

ResizeObserver.disconnect()

取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()

开始观察指定的 Element或 SVGElement。

ResizeObserver.unobserve()

结束观察指定的Element或 SVGElement。

示例

以下示例通过观察box的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('大小位置', entry.contentRect)
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

规范

SpecificationStatusComment
Resize Observer
ResizeObserver		Editor's DraftInitial definition.

浏览器兼容性

Update compatibility data on GitHub

 DesktopMobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ResizeObserverFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
ResizeObserver() constructorFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
disconnectFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
observeFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0
unobserveFull support64Full support79Full support69No supportNoFull support51Full support13.1Full support64Full support64No supportNoFull support47Full support13.4Full support9.0

本文内容并非原创，仅为记录。文章来源：

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver 。

https://zhuanlan.zhihu.com/p/41418813

探索 ResizeObserver 强大功能的 JavaScript
python_bug262的博客
09-17 201
通过使用 ResizeObserver，开发者可以监测指定元素的大小变化，并在变化发生时执行相应的操作。例如，我们可以根据窗口的大小调整元素的样式或布局。通过掌握 ResizeObserver 的强大功能，你可以更加灵活地处理元素尺寸的变化，并创建出更加交互性和响应性的 Web 应用程序。需要注意的是，ResizeObserver 是一个较新的 API，因此在使用时需要确保目标浏览器的兼容性。通过这种方式，我们可以同时监测多个元素的尺寸变化，并在每个元素的尺寸发生变化时执行相应的操作。
JS中ResizeObserver内置对象的使用初识
cuijiying的博客
01-20 933
是一种用于观察元素大小变化的接口，可以非常方便地处理与布局相关的响应式设计。它提供了对元素大小变化的监听能力，特别适用于处理视图尺寸变化时的布局调整、组件刷新等操作。
Js：ResizeObserver 接口监视HTML元素尺寸的变化
彭世瑜的博客
12-01 710
【代码】Js：ResizeObserver 接口监视HTML元素尺寸的变化。
VUE3 中的 ResizeObserver 警告彻底解决方案
最新发布
2301_76849350的博客
05-20 1199
​ 今天在使用 Vue 3 + Ant Design Vue 开发后台管理系统时，在页面频繁触发 元素尺寸变化（如表格滚动、窗口缩放） 的时候，控制台频繁出现如下警告： ResizeObserver loop completed with undelivered notifications. 经过查询，这是一个 浏览器层面的警告，尤其是 Chrome 对 ResizeObserver 的限制提示 —— 它不会导致程序 ​
浅谈ResizeObserver
m0_45093055的博客
05-27 1652
ResizeObserver的应用场景广泛，主要包括以下几个方面：响应式布局：当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。数据可视化：在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。
ResizeObserver API详解
热门推荐
秋来九月八
04-27 1万+
ResizeObserver 是一个 JavaScript API，用于监视元素的大小变化。它可以观察一个或多个 DOM 元素，以便在元素的大小或形状发生变化时触发回调函数。ResizeObserver 是为了更有效地处理元素尺寸变化而引入的，特别适用于响应式设计和自适应布局。
js ResizeObserver API
qq_42683219的博客
11-17 490
使用场景：如果你需要监测特定元素的大小变化，Resize Observer 是更好的选择。如果只是需要监测窗口大小变化，使用 resize 事件更为简单。选择依据：基于项目需求和浏览器兼容性来决定使用哪种方法。对于性能要求高和需要精确控制的情况，Resize Observer 更合适；而对于基础的窗口调整监控，监听 resize 事件可能就足够了。希望这些信息能帮助你理解 Resize Observer 和窗口 resize 事件的区别及各自的优缺点！
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
dxn16638400024的博客
11-25 2579
另外，你也可以创建一个自定义指令来监听DOM元素的宽高变化。来监听绑定指令的DOM元素的宽高变化。当宽高变化时，会调用指令绑定值所指定的方法。来监听DOM元素的宽高变化。访问DOM元素进行观察。当宽高变化时，会调用。以上示例演示了如何在Vue组件中通过。以上示例演示了如何创建一个自定义指令。来监听DOM元素的宽高变化。希望以上代码示例对你有所帮助！在Vue中，你可以使用。
Angular中使用ResizeObserver监听Html Element宽度变化（支持IE）
SThranduil的博客
03-04 1624
Angular中使用ResizeObserver监听Html Element宽度变化（支持IE）1. dependency：2.使用：3. 注意事项： 1. dependency： "resize-observer-polyfill": "^1.5.1", 2.使用： import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, ViewEn
vue监听dom大小改变案例
11-19
注意，尽管在示例中使用了`getElementById`，但你同样可以通过`ref`属性获取Vue组件内的DOM元素。 2. 使用`ResizeObserver` API： `ResizeObserver`是现代浏览器提供的一种原生API，用于监听元素的尺寸变化。创建...
ResizeObserver监听多个元素
01-10
### 如何使用 ResizeObserver API 同时监听页面中多个元素的尺寸变化 为了同时监听页面中的多个元素，可以通过创建单个 `ResizeObserver` 实例来观察多个目标元素。下面是一个具体的实现方法： #### 创建和配置 ...
vue使用resizeobserver监听div大小改变、
02-08
下面是一个简单的例子，展示了如何在 Vue.js 中使用 ResizeObserver 监听 div 的大小改变： ``` <!-- 其他内容 --> export default { mounted() { const myDiv = this.$refs.myDiv const observer = ...
vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发
05-27
vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的帖子npm install vue-response-components（可选）从“ vue”全局导入插件vue从“ vue-response-components”导入{VueResponsiveComponents} Vue.use（VueResponsiveComponents）它将添加响应组件和v-response指令，带有作用域插槽的“使用响应”组件
js ResizeObserver监听元素大小、显隐变化
weixin_43294560的博客
03-05 2111
对于窗口大小改变可以用 addEventListener 监听 resize 事件 由于reize事件会在一秒内触发将近60次，所以window.resize事件通常是很消费性能的 对于任意元素大小改变可以用ResizeObserver 监听的内容：Element的内容区域、SVGElement的边界框改变、某个节点的出现和隐藏 1、使用 const resizeObserver = new ResizeObserver(entries => { for (let entry of e
JS监听DOM元素resize
xdhc的博客
01-21 1403
try { let resizeObserver = new ResizeObserver(entries => { console.log('resize', entries) }) resizeObserver.observe(this) } catch (e) { console.log(e) }
js ResizeObserver 监听 DOM元素宽度高度改变
sinat_39013092的博客
05-12 813
let a = document.getElementById('a') let obverser = new ResizeObserver(entries => { for (let entry of entries) { console.log(entry.contentRect.width) } }) obverser.observe(a) 注意ResizeObserver 这是一个实验中的功能
js ResizeObserver作用
ivan5277的博客
09-11 488
是一个 JavaScript API，它允许开发者观察 DOM 元素尺寸的变化，而不需要显式地进行定时轮询。这对于实现响应式布局、动态调整元素大小或者其他依赖于元素尺寸变化的功能非常有用。
【JS】1684- 重学 JavaScript API - Resize Observer API
pingan8787
05-16 515
❝前期回顾：1.Page Visibility API2. Broadcast Channel API3. Beacon API❞???? 什么是 Resize Observer APIResize Observer API[1] 可以帮助我们监听元素尺寸的变化，并在尺寸变化时执行一些操作。例如，我们可以使用 Resize Observer API 来动态调整 UI 布局、加载或卸载图片等。???? 如何使...
js 一分钟熟悉ResizeObserver用法
ivan5277的博客
09-27 715
是一个 JavaScript API，它允许你在不使用轮询（即定时器或请求动画帧）的情况下监听元素尺寸的变化。这对于实现高效的布局更新或者响应式设计非常有用。下面是一个基本的。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值