当前位置: 首页 > 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;开发者可以采取以下几种…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...