使用变异观测器检测dom元素样式的变化

Question

使用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;
  }
}

下面是代码的活版

Answer 1

变异观察者可以观察到对DOM树所做的更改，。

当您的CSS MediaQuery更改时，DOM树不会受到任何影响，因此MutationObserver不会捕获它。

您的困惑来自于HTMLElement_s确实具有style属性这一事实。这种态度确实是DOM树的一部分。但是这个style属性不是应用于元素的_style。这个属性确实声明了一个StyleSheet，如果需要的话，CSSOM将解析和使用它，但是CSSOM和DOM是两个独立的东西。

因此，您要检测的是CSSOM更改而不是DOM更改(当您调整屏幕大小时，style属性不会更改)，而MutationObserver无法做到这一点。

但是，由于您愿意侦听CSS MediaQuery更改，所以可以使用MediaQueryList接口及其改换事件处理程序：

​

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>

​