MutationObserver未触发：无法检测响应式布局下div隐藏变化

我有如下div元素，当视口为平板或桌面端时，其display样式会通过CSS类变为none，希望用MutationObserver检测该变化：

<div class="l-off-canvas l-off-canvas--left l-off-canvas--right l-stack l-stack--horse l-hidden@tablet l-hidden@desktop" data-mobile-view>
        <div class="l-grid l-grid--no-gap">
            <div data-component-hook-blog-function="blogColumn" class="l-grid__cell l-grid__cell--1/3 l-grid__cell--1/1@phone" data-blog-mobile-column></div>
        </div>
</div>

尝试了以下JS代码，但视口切换时MutationObserver未触发：

divMobileArticles = document.querySelector<HTMLElement>('[data-mobile-view]');

const observer = new MutationObserver((mutationRecords) => {
            console.log(mutationRecords); // 打印变化
        });
// 监听除属性外的所有变化（注：此处注释与配置矛盾，实际开启了attributes监听）
        observer.observe(divMobileArticles, {
            attributes: true,
            childList: true, // 监听直接子元素
            subtree: true, // 监听所有后代元素
            characterDataOldValue: true, // 传递旧数据到回调
        });

还尝试监听更高层级祖先元素，并添加attributeFilter选项，但调整视口时Observer仍然不触发：

const observer = new MutationObserver((mutationRecords) => {
            console.log(mutationRecords); // 打印变化
        });
// 监听除属性外的所有变化（注释同样矛盾）
        observer.observe(this.config.element, {
            attributes: true,
            attributeFilter: ['data-mobile-view'],
            childList: true, // 监听直接子元素
            subtree: true, // 监听所有后代元素
            characterDataOldValue: true, // 传递旧数据到回调
        });

原因分析 #

MutationObserver只能检测DOM元素自身属性的直接修改（比如class、style、id等属性的添加/删除/修改）。而你的场景中，元素的display变化是由CSS媒体查询触发的——l-hidden@tablet/l-hidden@desktop类始终存在于元素上，只是CSS规则根据视口尺寸切换生效状态，DOM本身没有任何属性变化，所以MutationObserver不会触发。

解决方案 #

方法1：监听窗口resize事件 + 检查计算样式 #

直接监听窗口尺寸变化，通过getComputedStyle获取元素实际生效的display值，对比变化：

const divMobileArticles = document.querySelector('[data-mobile-view]');
let lastDisplay = window.getComputedStyle(divMobileArticles).display;

// 监听resize事件
window.addEventListener('resize', () => {
  const currentDisplay = window.getComputedStyle(divMobileArticles).display;
  if (currentDisplay !== lastDisplay) {
    console.log('display样式变化:', lastDisplay, '→', currentDisplay);
    lastDisplay = currentDisplay;
    // 这里执行你的业务逻辑
  }
});

// 初始检查一次
console.log('初始display值:', lastDisplay);

方法2：使用ResizeObserver监听元素尺寸变化 #

如果需要更精准地监听元素自身的尺寸变化（而非窗口），可以用ResizeObserver——当元素display:none时，其宽高会变为0，以此判断状态：

const divMobileArticles = document.querySelector('[data-mobile-view]');
const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    const isHidden = width === 0 && height === 0;
    console.log('元素是否隐藏:', isHidden);
    // 这里执行你的业务逻辑
  });
});

resizeObserver.observe(divMobileArticles);

方法3：仅当类名被动态修改时使用MutationObserver #

如果你的场景中，l-hidden@tablet/l-hidden@desktop类是通过JS动态添加/移除的（而非一直存在），可以调整MutationObserver配置，只监听class属性变化：

const divMobileArticles = document.querySelector('[data-mobile-view]');

const observer = new MutationObserver((mutationRecords) => {
  mutationRecords.forEach(record => {
    if (record.attributeName === 'class') {
      console.log('类名变化:', record.oldValue, '→', divMobileArticles.className);
      // 这里执行你的业务逻辑
    }
  });
});

observer.observe(divMobileArticles, {
  attributes: true,
  attributeFilter: ['class'], // 仅监听class属性
  attributeOldValue: true // 保留旧值用于对比
});

内容的提问来源于stack exchange，提问作者scura s