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

js监听div尺寸,ResizeObserver

示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><style>.observedDiv {width: 40vw;height: 50vh;background-color: lightblue;}</style></head><body><div id="observedDiv" class="observedDiv">这个 div 的宽高会被监听。</div><script>const observedDiv = document.getElementById('observedDiv')const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {const { width, height } = entry.contentRectconsole.log(`新的宽度: ${width}px,新的高度: ${height}px`)}})// 开启监听resizeObserver.observe(observedDiv)setTimeout(() => {console.log('停止监听了')// 卸载监听-指定domresizeObserver.unobserve(observedDiv)// 卸载监听-所有// resizeObserver.disconnect();}, 5000)</script></body>
</html>

http://www.lryc.cn/news/467517.html

相关文章:

  • STM32与openmv的串口通信
  • C#基于SkiaSharp实现印章管理(11)
  • Spring使用@Async出现循环依赖原因以及解决方案
  • 如何训练 RAG 模型
  • 鸿蒙网络编程系列34-Wifi热点扫描及连接示例
  • LVS三种模式工作原理
  • 【二轮征稿启动】第三届环境工程与可持续能源国际会议持续收录优质稿件
  • 网络安全——防火墙技术
  • Missing classes detected while running R8报错解决方案
  • 智能指针
  • 通过DevTools逃离Chrome沙盒(CVE-2024-6778和CVE-2024-5836)
  • 手持无人机飞手执照,会组装调试入伍当兵有多香!
  • 项目经理好累好烦啊,不想干了....
  • 论技术人员“技术人格”的重要意义
  • Kafka异常重试方案小记
  • 非页面缓冲池占用过高处理方法
  • 【Linux】进程信号(下)
  • FlinkCDC 实现 MySQL 数据变更实时同步
  • JavaWeb——Maven(4/8):Maven坐标,idea集成-导入maven项目(两种方式)
  • 实现uniapp天地图边界范围覆盖
  • 思科网络设备命令
  • Egg.js使用ejs快速自动生成resetful风格的CRUD接口
  • 自动化抖音点赞取消脚本批量处理
  • 基于YOLOv8深度学习的智能车牌检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战
  • qt QGraphicsGridLayout详解
  • 数字处理系列
  • 基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码
  • 【Python】Python2.7升级Python3
  • Python 内置函数 round() 详解
  • JavaScript入门中-流程控制语句