代码之家 › 专栏 › 技术社区 › edkeveked

使用突变观察者检测DOM元素样式的变化

angular javascript

edkeveked · 技术社区 · 7 年前

使用 MutationObserver 我想检测由于组件中的媒体查询而导致的DOM元素更改。

但是,当样式更改时,mutationobserver无法触发事件。

detectDivChanges() {
    const div = document.querySelector('.mydiv');
    const config = { attributes: true, childList: true, subtree: true };
    const observer = new MutationObserver((mutation) => {
      console.log("div style changed");
    })
    observer.observe(div, config);
  }
}

<div class="mydiv">test</div>

.mydiv {
  height: 40px;
  width: 50px;
  background-color: red;
}

@media screen and (min-width : 500px) {
  .mydiv {
    background-color: blue;
  }
}

这是一个 live version 代码的

1 回复 | 直到 7 年前

Kaiido 7 年前

突变观察者可以观察到正在发生的变化。 到DOM树 .
当CSS MediaQuery更改时, DOM树 不会受到任何影响,因此mutationobserver不会捕获它。

你的困惑来自于 HTML元素 S确实有一个 style 属性。这个属性实际上是DOM树的一部分。但是这个 风格 属性不是风格应用于元素的。此属性声明的样式表 CSSOM公司 如果需要,将解析并使用,但是cssom和dom是两个独立的东西。

因此,您要检测的是CSSOM更改,而不是DOM更改(即 风格 当您调整屏幕大小时,属性不会改变),这是mutationobserver无法做到的。

但是,由于您愿意侦听CSS MediaQuery更改,因此可以使用 MediaQueryList 接口及其 onchange 事件处理程序:

const mediaQuery = window.matchMedia('screen and (min-width : 500px)');
mediaQuery.onchange = e => {
  console.log('mediaQuery changed', 'matches:', mediaQuery.matches);
}

.mydiv {
  height: 40px;
  width: 50px;
  background-color: red;
}

@media screen and (min-width : 500px) {
  .mydiv {
    background-color: blue;
  }
}

<div class="mydiv">test</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前