js 如何监听DOM树中document.getElementById("body").style.fontFamily

在JavaScript中，你可以使用`addEventListener`方法来监听`id`为"body"的元素的`style`属性变化，特别是关于`fontFamily`的变化。首先，你需要创建一个事件处理器函数，这个函数会在`style.fontFamily`属性改变时被调用：

// 获取body元素并设置初始的字体家族
const bodyElement = document.getElementById("body");
let initialFontFamily = bodyElement.style.fontFamily;

// 监听style.fontFamily的变更
bodyElement.addEventListener('propertychange', function(event) {
  if (event.propertyName === 'fontSize') { // 只检查fontFamily属性
    const newFontFamily = bodyElement.style.fontFamily;
    
    // 在这里可以处理新旧字体家族的差异
    console.log(`Font family changed from ${initialFontFamily} to ${newFontFamily}`);

    // 更新初始值以便于下次比较
    initialFontFamily = newFontFamily;
  }
});

请注意，`propertychange`事件并不是所有浏览器都支持，对于更精确的字体家族更改监控，通常推荐使用MutationObserver API，它可以观察DOM的结构变动。

// 使用MutationObserver
const observer = new MutationObserver((mutationsList, observer) => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const styleObject = window.getComputedStyle(bodyElement);
      const fontFamily = styleObject.getPropertyValue('font-family');
      // ...处理字体家族变更...
    }
  });
});

observer.observe(bodyElement, { attributes: true, attributeFilter: ['style'] });