首页 > 其他分享 >样式监听

样式监听

时间:2022-12-20 16:57:23浏览次数:32  
标签:const observer 样式 节点 mutationRecord true 监听

watchStyle () {
  const el_class_parent = document.querySelector('要监听的元素')
  const observer = new MutationObserver(callback)
  var that = this
  function callback (mutationRecords, observer) {
    mutationRecords.forEach(mutationRecord => {
      if (this.timer) {
        // 防抖一下,方便打印最后一次
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        // 可以在这里打印这个元素
      }, 50)
    })
  }
  const config = {
    attributes: true,
    attributeFilter: undefined, /*需要监听的属性名称列表,如果没有表示监听全部的属性*/
    attributeOldValue: true, /*传递之前旧的值给mutationRecord*/
    characterData: true, /*是否监听内部文本节点的数据变化*/
    characterDataOldValue: true, /*mutationRecord 是否包含内部文本节点变化前的数据*/
    childList: true,
    subtree: true /*是否把监听的方位放到节点树中的全部子节点上*/
  }
  observer.observe(el_class_parent, config)
},

  

标签:const,observer,样式,节点,mutationRecord,true,监听
From: https://www.cnblogs.com/newBugs/p/16994594.html

相关文章

  • 故障分析 | MySQL 无监听端口故障排查
    作者:王向爱可生DBA团队成员,负责公司DMP产品的运维和客户MySQL问题的处理。擅长数据库故障处理。对数据库技术和python有着浓厚的兴趣。前言最近解决了一个比较基础......
  • Angular JS入门 (一)事件监听(二)多控制器思想与模块化编程(三)路由router
    AngularJS入门☀️将流式结构--->模块化一、事件监听1.事件监听前言NG框架中通过对元素标签添加[ng-事件名]指令,来对元素添加事件监听而事件监听的回调函数需要在con......
  • React.js 修改文本中数字样式
    exportfunctionnumberToColor(text,color='#635BFF',size='12px'){letreg=/(\d+)/g;returntext.replace(reg,`<spanstyle="color:${color};size:$......
  • 裁剪栅格—(偏移、发布后服务样式解决)
    前言应用场景:点值数据经过插值后形成栅格数据。对于结果中,需要把水体等地表要素不具备值的地方剔除。由此引出了一些列的问题。问题:1、QGIS中使用“按掩膜图......
  • css 修改复选框的样式
    效果图:实现代码如下:/*选中input标签类型为复选框的*/input[type="checkbox"]{width:16px;height:16px;vertical-align:middle;-webkit-appeara......
  • 监听感悟
    把监听看成一个app(软件)。。每个软件要想客户端找到通过端口。每个app都要有端口。。。。客户端通过tnsname中的ip地址找到监听所在服务器!!!通过端口识别要找到的软件是......
  • wps js 复制wps样式,以及造成的系统崩溃的分析
     今天在学习wpsjs样式设置。按照wpsjs的开发文档。复制样式应该使用的是 Application.OrganizerCopy方法。这个方法的格式是:express.OrganizerCopy(Source, Des......
  • MAUI新生5.3-样式外观:触发器Trigger
    MAUI的触发器,提供了在运行时动态更改控件样式的方法。在Blazor或Vue中,可以通过三元表达式或绑定class来轻松实现,而MAUI则相对麻烦些,需要通过触发器来实现。触发器,其实就是......
  • WPF自定义搜索框控件样式
    效果图默认焦点触发新建一个用户控件,xaml代码如下:`<Grid.ColumnDefinitions><ColumnDefinitionWidth="15"></ColumnDefinition><ColumnDefi......
  • css样式补充,项目前置认知,精灵图,背景图片大小,阴影,过渡,SEO简介
    1、css样式补充,项目前置认知,字体图标学习目标:u能够在网页中使用精灵图u能够使用背景大小属性,设置背景图片的大小u能够认识CSS书写顺序,提高代码专业性和浏览器渲......