js监听div尺寸,ResizeObserver

news2024/11/28 7:27:40

示例:

<!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.contentRect
          console.log(`新的宽度: ${width}px,新的高度: ${height}px`)
        }
      })
      // 开启监听
      resizeObserver.observe(observedDiv)

      setTimeout(() => {
        console.log('停止监听了')
        // 卸载监听-指定dom
        resizeObserver.unobserve(observedDiv)
        // 卸载监听-所有
        // resizeObserver.disconnect();
      }, 5000)
    </script>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2227311.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NVR批量管理软件/平台EasyNVR多个NVR同时管理:H.265与H.264编码优势和差异深度剖析

在数字化安防领域&#xff0c;视频监控系统正逐步成为各行各业不可或缺的一部分。随着技术的不断进步&#xff0c;传统的视频监控系统已经难以满足日益复杂和多变的监控需求。下面我们谈及NVR批量管理软件/平台EasyNVR平台H.265与H.264编码优势及差异。 一、EasyNVR视频汇聚平台…

QT实时显示日志内容

性能有待提高&#xff1b; 能够读取指定目录下的日志文件&#xff0c;显示在下拉框中。 选择某一个日志之后&#xff0c;点击获取数据按钮&#xff0c;能够实时刷新日志内容。 但是每次刷新都会对整个文件进行读取&#xff0c;文本框重新加载文本。效率很低&#xff0c;影响性能…

Unity 编辑器扩展精髓 之 窗口创建与绘制基础组件

本专栏基础资源来自唐老狮和siki学院&#xff0c;仅作学习交流使用&#xff0c;不作任何商业用途&#xff0c;吃水不忘打井人&#xff0c;谨遵教诲 本文只需要知道三个重点即可 EditorWindow类负责操作窗口 OnGUI方法是进入GUI窗口绘制的关键函数 GUILayout类负责绘制具体内容 …

前端页面样式没效果?没应用上?

当我们在开发项目时会有很多个页面、相同的标签&#xff0c;也有可能有相同的class值。样式设置的多了&#xff0c;分不清哪个是当前应用的。我们可以使用网页的开发者工具。 在我们开发的网页中按下f12或&#xff1a; 在打开的工具中我们可以使用元素选择器&#xff0c;单击我…

项目管理软件:5款甘特图工具测评

在项目管理中&#xff0c;甘特图作为一种直观且高效的任务进度展示工具&#xff0c;被广泛应用于各个行业。以下是几款功能强大、易于使用的甘特图工具&#xff0c;它们能够帮助项目经理更好地规划、跟踪和管理项目进度。 1、进度猫 进度猫是国内项目管理新秀&#xff0c;是…

#渗透测试#SRC漏洞挖掘# 信息收集-Shodan进阶路由交换

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

你真的会使用万用表吗?

​更多电路设计&#xff0c;PCB设计分享及分析&#xff0c;可关注本人微信公众号“核桃设计分享”&#xff01; 前几天公司一个刚毕业出来的小伙伴在实验室用万用表测负载电流的时候&#xff0c;直接打火花&#xff0c;把他吓得不轻 我一看&#xff0c;好家伙&#xff0c;万用…

基于SSM的心理咨询管理管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的心理咨询管理管理系统拥有三个角色&#xff1a;学生用户、咨询师、管理员 管理员&#xff1a;学生管理、咨询师管理、文档信息管理、预约信息管理、测试题目管理、测试信息管理…

SpringBoot框架下的扶贫信息管理系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理精准扶贫管理系统的相关信息成为必然。开发…

如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?

在OA系统或者合同管理系统中&#xff0c;我们会经常遇到网页在线编辑Word文档形式的公文及合同的情况&#xff0c;并且需要上级对下级的公文进行批注等操作&#xff0c;或者不同部门的人需要签字审核&#xff0c;这就需要用到文档流转功能&#xff0c;如何用猿大师办公助手实现…

2024年全国山洪径流模拟与洪水危险性评价技术及典型地区洪水淹没及损失分析——建议收藏!

原文链接&#xff1a;2024年全国山洪径流模拟与洪水危险性评价技术及典型地区洪水淹没及损失分析——建议收藏&#xff01;https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247624758&idx2&sn9f51a07adadc7a7af5ddfe79dd5dd22e&chksmfa8da9d1cdfa20c7305…

获取上传至DMS服务器上文件的URL

文件上传 DATA: lv_class TYPE toadv-doc_type,lv_objectid TYPE sapb-sapobjid.CALL FUNCTION ZARCHIV_CREATE_DIALOG_METAEXPORTINGarchiv_id Z1 "内容存储库IDar_object ZALLFILES "文档类型 * …

单链表OJ题(1):移除链表元素

目录 解法一&#xff1a;带头节点的新链表 解法二&#xff1a;不带头节点的新指向关系链表 总结 这是一道简单的力扣题目&#xff0c;关于解法的话&#xff0c;这里提供了二种思路&#xff0c;重点解释前两种&#xff0c;还有一种思路好想&#xff0c;但是时间复杂度为O(n^2…

qt QGridLayout详解

QGridLayout 是 Qt 框架中的一个布局管理器&#xff0c;用于在网格中排列控件。它允许开发者以行和列的形式组织控件&#xff0c;灵活地管理控件的大小和位置。 重要方法 QGridLayout(QWidget *parent nullptr)&#xff1a;创建一个 QGridLayout对象&#xff0c;并指定其父窗…

R语言笔记(四):函数

文章目录 一、Function basics1、Creating your own function2、Function structure3、Using your created function4、Multiple inputs5、Default inputs 二、Return values and side effects1、Returning more than one thing2、Side effectsExample of side effect: plot 三…

基于熵权法的TOPSIS模型

基于熵权法的TOPSIS模型 1. 简介 数学建模可以结合 熵权法 和 T O P S I S TOPSIS TOPSIS 法各自的特点&#xff0c;进行评价&#xff0c;这种组合模型的使用在数学建模比赛中使用的非常多。 在 2023 美赛 O 奖中就有使用该方法的&#xff0c;往年国赛国奖中也有 2. 熵权法介…

Chromium HTML5 新的 Input 类型tel对应c++

一、Input 类型: tel <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body><form action"demo-form.php">电话号码: <input type"tel" name…

Cesium基础-(Entity)-(point)

** 里边包含Vue、React框架代码 ** 1、point 点 效果&#xff1a; Cesium中点(Point)的详细解读如下&#xff1a; Entity API简介&#xff1a; Cesium提供了Entity API&#xff0c;它是一个高级别的数据驱动的API&#xff0c;用于管理一组相关性的可视化对象。Entity API使…

宠物空气净化器有哪些功能呢?优品宠物空气净化器使用体验分享

前段时间&#xff0c;我朋友家生二胎了&#xff0c;为了家里的宝宝&#xff0c;准备入手一台空气净化器。跑来问我&#xff0c;让我推荐一款能净化空气的空气净化器。让他描述描述需求&#xff0c;才知道&#xff0c;他家除了新添了二胎外&#xff0c;最近还养了一只猫&#xf…

学习私服并配置到项目中

下载地址 一、安装 1.将下载好的压缩包进行解压 2.进人bin目录下cmd&#xff0c;执行 nexus.exe /run nexus3.访问nexus界面 在浏览器中输入&#xff1a;http://localhost:8081 4.登录 Username为admin Password根据提示到安装包中去找 二、本地仓库与私服连接 1.创建…