Question

使用com.install4j.api.launcher.SplashScreen.hide()我想检测由于组件中的媒体查询而导致的dom元素更改。

但是，当样式更改时，MutationObserver无法触发事件。

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>

这是代码的live version

Answer 1

Mutation Observer可以观察对DOM树所做的更改。
当您的CSS MediaQuery更改时， DOM树不会受到任何影响，因此MutationObserver不会捕获它。

您的困惑来自于 HTMLElement 确实具有style属性的事实。这个礼物确实是DOM树的一部分。但是此style属性不是应用于元素的 style 。此属性确实声明了一个StyleSheet，如果需要， CSSOM 将对其进行解析和使用，但是CSSOM和DOM是两个独立的事物。

因此，您要检测的是CSSOM更改而不是DOM更改（在调整屏幕大小时style属性不会更改），而且，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>

使用Mutation Observer检测dom元素样式更改

1 个答案: