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

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

angular javascript

2

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 年前

1

Kaiido NickSlash 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>