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

使用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&#xff0c;可以看mdn的官网&#xff0c;ResizeObserver - Web API | MDN (mozilla.org)&#xff…...

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

简述&#xff1a;在前端开发中&#xff0c;弹框和实时视频播放是常见的需求。这里来简单记录一下&#xff0c;如何使用Vue.js和Element UI实现一个可拖动的弹框&#xff0c;并在其中播放实时视频。同时&#xff0c;确保在拖拽弹框时&#xff0c;底层元素仍然可以操作。 一、项目…...

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

文华财经多空K变色支撑压力画线趋势波段指标公式&#xff1a; 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 漏洞名称&#xff1a;CVE-2024-23672 影响版本&#xff1a;tomcat9.0.0-M1 to 9.0.85&#xff1b;tomcat8.5.0 to 8.5.98 处理…...

ChatGLM-6B入门

ChatGLM-6B ChatGLM-6B 一、介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最…...

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

背景 用户体验不断提升而3对实时数据的需求日益增长&#xff0c;传统的数据获取方式无法满足实时数据的即时性和个性化需求。 GraphQL作为新兴的API查询语言&#xff0c;提供更加灵活、高效的数据获取方案。结合Spring Boot作为后端框架&#xff0c;利用GraphQL实现实时数据推…...

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

复杂的汽车系统对软件的质量和可靠性提出了极高的要求。为了确保汽车软件的高质量和可靠性&#xff0c;ASPICE&#xff08;Automotive SPICE&#xff0c;汽车软件过程改进和能力确定&#xff09;流程应运而生。本文将对ASPICE流程进行详细介绍。 一、ASPICE概述 ASPICE是汽车行…...

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

目录 1.gdb背景2.开始使用gdb3.make/makefile 背景4.实例代码5.依赖关系6.依赖方法7.原理8.项目清理 1.gdb背景 程序的发布方式有两种&#xff0c;debug模式和release模式 Linux gcc/g出来的二进制程序&#xff0c;默认是release模式 要使用gdb调试&#xff0c;必须在源代码生…...

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

今天我们继续结合发布的Html5基础知识点文档进行复习&#xff0c;希望对大家有所帮助。 目录 列表 无需列表 有序列表 自定义列表 样例 表格 基本属性 ​编辑 相关属性 Border Width Height ​编辑 表格标题 ​编辑 表格单元头 合并单元格 垂直单元格合并 水…...

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

1. 虚拟机先扩容 1.1 关机&#xff0c;并点击系统&#xff0c;让他是点选状态&#xff0c;但是没开机 1.2 右击&#xff0c;点击最下方设置&#xff0c;点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小&#xff0c;数字为总大小 完成提示&#xff1a; 磁盘已成功扩展。您…...

什么样的开放式耳机好用?,五大超强卷王单品推荐!

对于热衷尝试不同耳机类型的小伙伴们而言&#xff0c;经过对佩戴舒适度、音质清晰度及电池续航能力的全面考量&#xff0c;开放式蓝牙耳机因其卓越的平衡性脱颖而出&#xff0c;成为多数人的心头好。其轻巧设计不仅保证了长时间佩戴的舒适感&#xff0c;还兼顾了音质与续航的双…...

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

文章目录 一、单个饼状图生成1.word模版制作2.编写接口完整代码3.导出结果 二、批量生成饼图1.word模版制作2.编写接口完整代码3.导出结果 一、单个饼状图生成 1.word模版制作 在word中创建一个饼状图&#xff0c;点击图表&#xff0c;点击“文本选项”&#xff0c;在可选文字…...

指定版本ceph-common安装

如&#xff0c;安装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)

注意&#xff1a; 本内容为摘抄网上的学习资料&#xff0c;作为个人笔记使用&#xff0c;如有侵权, 立刻删除。 C语言特性 1.关键字 &#xff08;1&#xff09;static static全局变量和普通全局变量 面试高频指数&#xff1a;★★★☆☆ 相同点&#xff1a; 存储方式&…...

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

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 ###介绍 VNC&#xff0c;即“Virtual Network Computing”&#xff0c;是一种连接系统&#xff0c;允许您使用键盘和鼠标与远程服务器上…...

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

前言 RequestBody 注解是我们进行JavaEE开发&#xff0c;最常见的几个注解之一&#xff0c;这篇博文我们以案例和源码相结合&#xff0c;帮助大家更好的了解 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 数据库&#xff08;表&#xff09;到本地 mysqldump是MySQL自带的一个实用程序&…...

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

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;EasyCVR基于云边端一体化架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…...

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

快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子&#xff0c;一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…...

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

在C#开发中&#xff0c;由于.NET程序集&#xff08;assemblies&#xff09;是基于中间语言&#xff08;Intermediate Language, IL&#xff09;编译的&#xff0c;这些程序集可以被反编译回接近原始源代码的形式。为了保护代码不被轻易反编译&#xff0c;开发者可以采取以下几种…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...