JS监听DOM宽高的变化

在 JS里面 resize 方法可以监听 window 窗口的大小变化,如果要监听某个Dom的变化话需要用到 MutationObserver 来去监听了,示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#pp {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><p id="pp"></p><button id="btn">btn</button><script>var oP = document.getElementById('pp');let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;let observer = new MutationObserver(function (mutations) {console.log("asdf", mutations);});observer.observe(oP, {attributes: true,attributeFilter:['style'],attributeOldValue:true});document.getElementById('btn').onclick = function () {oP.style.width = '300px';}</script></body>
</html>

具体的使用、API、兼容性不再说了。

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

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

相关文章

ReferenceError: primordials is not defined

如果你是运行gulp遇到的问题&#xff0c;并且 gulp v3 和 node v12 版本的话。 解决办法 1.在 package.json 相同目录下创建 npm-shrinkwrap.json 文件&#xff0c;然后在文件里面写上 { "dependencies": { "graceful-fs": { "version": "…

SVN创建不了资源库位置 解决方案

提示错误信息: svn: Unable to connect to a repository at URL http://192.168.0.20/demo svn: Access to http://192.168.0.20/demo forbidden 解决方法如下&#xff1a; 1. 查看Eclipse中使用的是什么SVN Interface 查看方法&#xff1a;在eclipse中按菜单 windows > p…

爱奇艺要怎么样才能更换视频解码设置

1、第一步&#xff0c;打开电脑上的爱奇艺。 爱奇艺要怎么样才能更换视频解码设置 2、第二步&#xff0c;进入爱奇艺后&#xff0c;点击右上方的图案。 爱奇艺要怎么样才能更换视频解码设置 3、第三步&#xff0c;接着点击“高级设置”。 爱奇艺要怎么样才能更换视频解码设…

如何在QQ浏览器查看默认搜索引擎

QQ浏览器作为一款非常实用的浏览器软件之一&#xff0c;支持多种格式文档的使用、编辑&#xff0c;为用户提供更加方便的文档阅读方式&#xff0c;软件也提供多个默认搜索引擎&#xff0c;用户可以根据个人喜好选择适合自己的搜索引擎&#xff0c;那么&#xff0c;下面就由小编…

maven项目调试debug错误Source not found.

解决方法&#xff1a; 首先要先将正在调试的项目停止&#xff1b;右键项目 -> Debug As -> Debug Configurations ... 在左侧选择项目对应的启动配置 -> 选中Default -> Remove 点击上图中的Add -> 选Java Project -> 选中对应的项目源码 -> OK

腾讯视频怎么全屏

我们在看腾讯视频的时候&#xff0c;会出现视频没有全屏显示&#xff0c;左右两边还留有一部分的区域没有显示视频&#xff0c;看起来觉得很小&#xff0c;不过瘾&#xff0c;那小编就给大家分享一下如何全屏显示。 1、打开腾讯视频 点击选择一个想要播放的电视剧或者电影 腾…

360浏览器怎么保存网页账号密码

360浏览器强大的功能以及兼容模式&#xff0c;是现在最受欢迎的浏览器之一&#xff0c;比如替用户保存网页上的账号和密码&#xff0c;让浏览更快捷&#xff0c;那要怎么保存设置网页账号和密码呢。一起来学习下吧。 360浏览器怎么保存网页账号密码&#xff1f; 1、打开360浏…

eclipse中The JSP specification requires that an attribute name is preceded by whitespace

在eclipse中出现这错误,但在myeclipse中灭有 /WEB-INF/page/mailWrite.jsp (line: 1, column: 82) The JSP specification requires that an attribute name is preceded by whitespace 问题出在一个空格 1对 <%page language"java" contentType"text/html…

Win11系统如何刷新按钮

使用win11系统的用户发现想要使用按钮&#xff0c;却找不到刷新按钮&#xff0c;那么应该如何刷新呢?今日为你们带来的文章是关于Win11显示刷新按钮的技巧讲解&#xff0c;还有不清楚小伙伴和小编一起去学习一下吧。 Windows11系统如何刷新按钮&#xff1a; 右键单击您的桌面…

maven jar包冲突

项目启动中出现加载两次同一jar(位置不同),公司的库又不能随便动怎么办呢, 将打好包的项目放到tomcat里自己启动就不会再加载公司的库了 oK 问题解决,不过代码调试就是个问题,只能对照看,..................也没有别的办法了

怎么彻底关闭360浏览器的广告弹窗

打开电脑的时候都会自动弹出360广告弹窗&#xff0c;每次都需要自己手动关闭&#xff0c;非常麻烦。那要怎么彻底关闭这个广告弹窗呢?下面小编就为大家介绍一下怎么彻底关闭360浏览器的广告弹窗的办法吧。 操作如下&#xff1a; 电脑打开360浏览器&#xff0c;出现广告弹窗&…

利用dos进入mysql数据库操作数据

1.cd到mysql安装目录bin目录 2.输入ip 用户名,密码 3 3.查看数据库实例 4.进入一个实例 5,操作数据

SVN卸载,修复,等问题:依赖服务或组无法启动.(0x8007042c)解决之一

依赖服务或组无法启动.(0x8007042c) 问题解决办法&#xff1a; 点开始-运行-输入regedit 打开注册表 注册表路径HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services 在下面的列表中&#xff0c;找到winmgmt&#xff08;Windows Management Instrumentation 的服务名称&am…

Win11系统显示你的账户已被停用怎么办

Win11系统显示你的账户已被停用怎么办?很多朋友在更新完win11后&#xff0c;发现自己登录时显示你的账户已被停用进不去了&#xff0c;这是什么原因呢?这是因为我们可能因为某些原因不小心禁用了自己的账户&#xff0c;只需要进入安全模式或者进入另一个账户就可以了。下面小…

ajax同步

控制Ajax同,异步分属性是: async 默认值是true,(异步) false 就是同步了 $.ajax({ url: "login.do", async: false //(同步) }); 一般用涂在刷新页面过快时使用 防止交叉请求 菜单与内容不匹配 全局的方式$.ajaxSetup({ async: false });

爱奇艺怎么开启主设备

1、在爱奇艺界面&#xff0c;点击我的 爱奇艺怎么开启主设备 2、然后在我的界面&#xff0c;点击设置 爱奇艺怎么开启主设备 3、进入设置界面&#xff0c;点击账号与安全 爱奇艺怎么开启主设备 4、在账号与安全界面&#xff0c;点击设备管理 爱奇艺怎么开启主设备 5、最…

怎么修改腾讯视频账户和密码

相信很多朋友们也遇到过这种类似的问题&#xff0c;那么对于怎么修改腾讯视频账户和密码?下面就把解决这种问题的方法给大家分享一下&#xff0c;希望可以帮助到大家。 1、第一步我们要知道腾讯视频是怎么登录的&#xff0c;一共有两种方式&#xff0c;分别是QQ登录和微信登录…

div滚动字幕

滚动字幕标记<marquee>…</marquee >属性&#xff1a;滚动方向----direction (up 、down 、left 、right)滚动方式----behavior (scroll 、slide 、alternate)滚动速度----scrollamount (数字 例:30每次移动30像素)滚动延迟----scrolldelay (数字 例:5000.5秒)滚动…

struts2升级jar包遇到无法正常访问action的方法的问题

action name 取值为login!login.action 形式 而非login method name 为null 解决连接 http://blog.csdn.net/achilles12345/article/details/37697457 struts2安全漏洞频发&#xff0c;最近把这个升级了&#xff0c;但是发现了一些问题&#xff1b; 1、以前的url不能访问了&…