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

文章目录
- 关于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 关于这个Web API,可以看mdn的官网,ResizeObserver - Web API | MDN (mozilla.org)ÿ…...
前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作(可拖拽的视频实时播放弹框,底层元素可以正常操作)
简述:在前端开发中,弹框和实时视频播放是常见的需求。这里来简单记录一下,如何使用Vue.js和Element UI实现一个可拖动的弹框,并在其中播放实时视频。同时,确保在拖拽弹框时,底层元素仍然可以操作。 一、项目…...
文华财经多空K变色支撑压力画线趋势波段指标公式
文华财经多空K变色支撑压力画线趋势波段指标公式: VERTLINE(TIME0900,RGB(128,128,255)),DOT; VERTLINE(TIME2100,COLORBLACK),DOT; HH:HHV(HIGH,26); LL:LLV(LOW,26); HH1:BARSLAST((HH > REF(HH,1))); LL1:BARSLAST((LL < REF(LL,1))); PARTLINE((HH…...
tomcat9漏洞CVE-2024-23672
序号 漏洞名称 影响主机个数 1 Apache Tomcat 安全漏洞(CVE-2024-23672) 1/1 2 Apache Tomcat 输入验证错误漏洞(CVE-2024-24549) 1/1 漏洞名称:CVE-2024-23672 影响版本:tomcat9.0.0-M1 to 9.0.85;tomcat8.5.0 to 8.5.98 处理…...
ChatGLM-6B入门
ChatGLM-6B ChatGLM-6B 一、介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型,基于 General Language Model (GLM) 架构,具有 62 亿参数。结合模型量化技术,用户可以在消费级的显卡上进行本地部署(INT4 量化级别下最…...
项目实战--Spring Boot + GraphQL实现实时数据推送
背景 用户体验不断提升而3对实时数据的需求日益增长,传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言,提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架,利用GraphQL实现实时数据推…...
ASPICE是汽车软件开发中的质量保证流程
复杂的汽车系统对软件的质量和可靠性提出了极高的要求。为了确保汽车软件的高质量和可靠性,ASPICE(Automotive SPICE,汽车软件过程改进和能力确定)流程应运而生。本文将对ASPICE流程进行详细介绍。 一、ASPICE概述 ASPICE是汽车行…...
Linux调试器-gdb使用以及Linux项目自动化构建工具-make/Makefile
目录 1.gdb背景2.开始使用gdb3.make/makefile 背景4.实例代码5.依赖关系6.依赖方法7.原理8.项目清理 1.gdb背景 程序的发布方式有两种,debug模式和release模式 Linux gcc/g出来的二进制程序,默认是release模式 要使用gdb调试,必须在源代码生…...
Html5前端基本知识整理与回顾下篇
今天我们继续结合发布的Html5基础知识点文档进行复习,希望对大家有所帮助。 目录 列表 无需列表 有序列表 自定义列表 样例 表格 基本属性 编辑 相关属性 Border Width Height 编辑 表格标题 编辑 表格单元头 合并单元格 垂直单元格合并 水…...
vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容
1. 虚拟机先扩容 1.1 关机,并点击系统,让他是点选状态,但是没开机 1.2 右击,点击最下方设置,点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小,数字为总大小 完成提示: 磁盘已成功扩展。您…...
什么样的开放式耳机好用?,五大超强卷王单品推荐!
对于热衷尝试不同耳机类型的小伙伴们而言,经过对佩戴舒适度、音质清晰度及电池续航能力的全面考量,开放式蓝牙耳机因其卓越的平衡性脱颖而出,成为多数人的心头好。其轻巧设计不仅保证了长时间佩戴的舒适感,还兼顾了音质与续航的双…...
java使用poi-tl模版引擎导出word之饼状图生成及循环批量生成饼状图
文章目录 一、单个饼状图生成1.word模版制作2.编写接口完整代码3.导出结果 二、批量生成饼图1.word模版制作2.编写接口完整代码3.导出结果 一、单个饼状图生成 1.word模版制作 在word中创建一个饼状图,点击图表,点击“文本选项”,在可选文字…...
指定版本ceph-common安装
如,安装15.2.13的ceph-common PACKAGE_NAMEceph-common CEPH_VERSION15.2.13 wget -q -O- https://download.ceph.com/keys/release.asc | sudo apt-key add - echo deb http://download.ceph.com/debian-${CEPH_VERSION}/ $(lsb_release -sc) main | sudo tee …...
C++语言特性——关键字(static、volatile、extern、const、mutable、inline)
注意: 本内容为摘抄网上的学习资料,作为个人笔记使用,如有侵权, 立刻删除。 C语言特性 1.关键字 (1)static static全局变量和普通全局变量 面试高频指数:★★★☆☆ 相同点: 存储方式&…...
在Ubuntu 16.04上安装和配置VNC的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 ###介绍 VNC,即“Virtual Network Computing”,是一种连接系统,允许您使用键盘和鼠标与远程服务器上…...
@RequestBody注解的使用及源码解析
前言 RequestBody 注解是我们进行JavaEE开发,最常见的几个注解之一,这篇博文我们以案例和源码相结合,帮助大家更好的了解 RequestBody 注解 使用案例 1.自定义实体类 Data NoArgsConstructor AllArgsConstructor public class User {priv…...
linux 服务器数据备份 和 mysql 数据迁移
查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库(表)到本地 mysqldump是MySQL自带的一个实用程序&…...
安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?
安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,EasyCVR基于云边端一体化架构,具有强大的数据接入、处理及分发能力,可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…...
S32V234平台开发(一)快速使用
快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子,一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…...
C# 如何防止反编译?C#程序加密混淆保护方法大全
在C#开发中,由于.NET程序集(assemblies)是基于中间语言(Intermediate Language, IL)编译的,这些程序集可以被反编译回接近原始源代码的形式。为了保护代码不被轻易反编译,开发者可以采取以下几种…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
