如何使用JavaScript监听CSSDOM变化？MutationObserver失效问题

首先，你用MutationObserver没触发的原因在于：

• 若你监听的是body元素的属性变化，由于visibility是通过外部style标签的CSS规则应用的，而非直接修改body的style属性，所以MutationObserver不会触发。
• 若你监听的是style标签，但未配置正确的监听选项（比如没监听attributes变化，或未指定监听disabled属性），也会导致无日志输出。

下面是几种可行的检测方法：

方法1：监听style标签的disabled属性变化 #

当你禁用/启用style标签时，本质是修改了它的disabled属性，用MutationObserver监听这个属性的变化即可：

// 创建style标签并添加到DOM
const styleEl = document.createElement('style');
styleEl.textContent = 'body { visibility: hidden; }';
document.head.appendChild(styleEl);

// 配置MutationObserver
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'disabled') {
      console.log('style标签状态变化:', styleEl.disabled ? '已禁用' : '已启用');
      // 进一步检查body的visibility状态
      const bodyVisibility = getComputedStyle(document.body).visibility;
      console.log('body当前visibility:', bodyVisibility);
    }
  });
});

// 监听style标签的属性变化，只关注disabled属性
observer.observe(styleEl, {
  attributes: true,
  attributeFilter: ['disabled']
});

// 5秒后禁用style标签
setTimeout(() => {
  styleEl.disabled = true;
}, 5000);

方法2：轮询检测元素的计算样式变化 #

如果需要直接监听body的visibility计算样式变化，可以用requestAnimationFrame定期检查：

let prevVisibility = getComputedStyle(document.body).visibility;

function checkVisibility() {
  const currentVisibility = getComputedStyle(document.body).visibility;
  if (currentVisibility !== prevVisibility) {
    console.log('body visibility变化:', prevVisibility, '→', currentVisibility);
    prevVisibility = currentVisibility;
  }
  requestAnimationFrame(checkVisibility);
}

// 启动轮询
checkVisibility();

// 原有逻辑：创建style标签，5秒后禁用
const styleEl = document.createElement('style');
styleEl.textContent = 'body { visibility: hidden; }';
document.head.appendChild(styleEl);

setTimeout(() => {
  styleEl.disabled = true;
}, 5000);

方法3：利用CSS动画触发事件 #

通过给body添加一个针对visibility变化的CSS动画，监听animationstart事件来检测样式变化：

/* 定义一个无视觉变化的动画，仅用于触发事件 */
@keyframes visibilityChange {
  from { opacity: 1; }
  to { opacity: 1; }
}

body {
  animation: visibilityChange 0.01s;
}

document.body.addEventListener('animationstart', (e) => {
  if (e.animationName === 'visibilityChange') {
    const visibility = getComputedStyle(document.body).visibility;
    console.log('body visibility变化:', visibility);
  }
}, false);

// 原有逻辑
const styleEl = document.createElement('style');
styleEl.textContent = 'body { visibility: hidden; }';
document.head.appendChild(styleEl);

setTimeout(() => {
  styleEl.disabled = true;
}, 5000);

注意：方法3需要确保动画在visibility变化时会重新触发，可根据实际场景调整动画配置。

内容的提问来源于stack exchange，提问作者Yogesh Tembe