当前位置：首页 > news >正文

使用ResizeObserver观察DOM元素的尺寸变化

news 2025/9/15 17:18:15

在这里插入图片描述

文章目录

关于ResizeObserver
示例代码
示例代码结果如下所示
echarts自适应容器div大小
示例代码结果如下所示
echarts自适应容器大小的方式二

关于ResizeObserver

关于这个Web API，可以看mdn的官网，ResizeObserver - Web API | MDN (mozilla.org)，这里面有关于这个ResizeObserver 接口的说明。这个在可视化大屏的时候，关于echarts图表可能会用到这个，也就是说，需要做到echarts自适应容器div的大小。或者是低代码平台中要开发关于echarts的组件时会用到，我在低代码项目中，自定义开发echarts组件，就用到了这个内置的API。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Resize Observer with Input Events Example</title><style>#target {background-color: lightblue;margin: 20px;}</style>
</head>
<body><div id="target" style="width: 300px; height: 200px;">这个是绑定观察的元素：当前宽：300px, 高：200px
</div><label for="width">宽:</label>
<input type="number" id="width" value="300" min="0" max="500" placeholder="Set width">
<label for="height">高:</label>
<input type="number" id="height" value="200" min="0" max="500" placeholder="Set height"><div><button onclick="resizeObserver.disconnect()">停止观察</button><button onclick="resizeObserver.observe(targetElement)">重新观察</button>
</div><script>// 创建 ResizeObserver 实例const resizeObserver = new ResizeObserver(entries => {entries.forEach(entry => {console.log(`元素大小改变为，宽： ${entry.contentRect.width}px ，高： ${entry.contentRect.height}px`);targetElement.innerHTML = `这个是绑定观察的元素：当前宽：${entry.contentRect.width}px, 高：${entry.contentRect.height}px`;});});// 观察目标元素const targetElement = document.querySelector('#target');// 开始观察，可以观察多个元素，根据需求选择不同的元素即可，这里只拿一个作为示例// const targetElement1 = document.querySelector('#target1');// resizeObserver.observe(targetElement1);resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement = document.querySelector('#width');const heightInputElement = document.querySelector('#height');// 添加 input 事件监听器widthInputElement.addEventListener('input', function() {// 更新目标元素的宽度targetElement.style.width = `${this.value}px`;});heightInputElement.addEventListener('input', function() {// 更新目标元素的高度targetElement.style.height = `${this.value}px`;});// 在不再需要观察时取消观察// resizeObserver.unobserve(targetElement);// 清理观察器// resizeObserver.disconnect();
</script></body>
</html>

示例代码结果如下所示

注意看GIF图中的宽高数字变化

在这里插入图片描述

echarts自适应容器div大小

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Resize Observer with Input Events Example</title><!-- 在线引入echarts，因为是在线的，所以有可能会失效，如果链接失效了，自己去echarts官网找，然后引用即可 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><label for="width">宽:</label><input type="number" step="20" id="width" value="600" min="0" max="1000" placeholder="Set width"><label for="height">高:</label><input type="number" step="20" id="height" value="400" min="0" max="800" placeholder="Set height"><div><button onclick="resizeObserver.disconnect()">停止观察</button><button onclick="resizeObserver.observe(targetElement)">重新观察</button></div><script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 创建 ResizeObserver 实例const resizeObserver = new ResizeObserver(entries => {entries.forEach(entry => {console.log(`元素大小改变为，宽： ${entry.contentRect.width}px ，高： ${entry.contentRect.height}px`);myChart.resize();});});// 观察目标元素const targetElement = document.querySelector('#main');// 开始观察，可以观察多个元素，根据需求选择不同的元素即可，这里只拿一个作为示例// const targetElement1 = document.querySelector('#target1');// resizeObserver.observe(targetElement1);// 如果在vue中，这个应该在组件挂载时调用resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement = document.querySelector('#width');const heightInputElement = document.querySelector('#height');// 添加 input 事件监听器widthInputElement.addEventListener('input', function () {// 更新目标元素的宽度targetElement.style.width = `${this.value}px`;});heightInputElement.addEventListener('input', function () {// 更新目标元素的高度targetElement.style.height = `${this.value}px`;});// 在不再需要观察时取消观察，如果是在vue中，这个应该在组件销毁时调用// resizeObserver.unobserve(targetElement);// 清理观察器，如果是在vue中，这个应该在组件销毁时调用// resizeObserver.disconnect();</script></body></html>

示例代码结果如下所示

具体看下面的GIF图，这里通过输入数字的方式，模拟div大小变化时，echarts自适应容器大小。

在这里插入图片描述

echarts自适应容器大小的方式二

文章一：Echarts自适应div大小_echarts div resize-CSDN博客
文章二：vue3项目中让echarts适应div的大小变化，跟随div的大小改变图表大小_echart图根据div大小变化-CSDN博客

使用ResizeObserver观察DOM元素的尺寸变化

文章目录

关于ResizeObserver

示例代码

示例代码结果如下所示

echarts自适应容器div大小

示例代码结果如下所示

echarts自适应容器大小的方式二

相关文章：

使用ResizeObserver观察DOM元素的尺寸变化

前端使用Vue和Element实现可拖动弹框效果，且不影响底层元素操作（可拖拽的视频实时播放弹框，底层元素可以正常操作）

文华财经多空K变色支撑压力画线趋势波段指标公式

tomcat9漏洞CVE-2024-23672

ChatGLM-6B入门

项目实战--Spring Boot + GraphQL实现实时数据推送

ASPICE是汽车软件开发中的质量保证流程

Linux调试器-gdb使用以及Linux项目自动化构建工具-make/Makefile

Html5前端基本知识整理与回顾下篇

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容

什么样的开放式耳机好用？，五大超强卷王单品推荐！

java使用poi-tl模版引擎导出word之饼状图生成及循环批量生成饼状图

指定版本ceph-common安装

C++语言特性——关键字（static、volatile、extern、const、mutable、inline）

在Ubuntu 16.04上安装和配置VNC的方法

@RequestBody注解的使用及源码解析

linux 服务器数据备份和 mysql 数据迁移

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定，是什么原因？

S32V234平台开发(一)快速使用

C# 如何防止反编译？C#程序加密混淆保护方法大全

浅谈 React Hooks

Opencv中的addweighted函数

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Ascend NPU上适配Step-Audio模型

06 Deep learning神经网络编程基础激活函数 --吴恩达

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

使用LangGraph和LangSmith构建多智能体人工智能系统

PostgreSQL——环境搭建

Chrome 浏览器前端与客户端双向通信实战